[英]Scale inline SVG symbol referenced with <use>
I have an SVG logo defined as a symbol like so: 我将SVG徽标定义为符号,如下所示:
<svg class="SpriteSheet">
<symbol id="icon-logo" viewBox="-12 -79.61 407.19 108.36">
<path id="logo-upperLeft" d="M0-67.61l83.66 0 0-10 -93.66 0 0 30.92 10 0Z" transform="translate(-2 -2)"></path>
<path id="logo-upperRight" d="M383.19-67.61l-83.66 0 0-10 93.66 0 0 30.92 -10 0Z" transform="translate(2 -2)"></path>
<path id="logo-lowerLeft" d="M0 16.75l83.66 0 0 10 -93.66 0 0-30.92 10 0Z" transform="translate(-2 2)"></path>
<path id="logo-lowerRight" d="M383.19 16.75l-83.66 0 0 10 93.66 0 0-30.92 -10 0Z" transform="translate(2 2)"></path>
</symbol>
</svg>
This definition is included at the top of the body
and styled with display:none
. 此定义包含在
body
的顶部,并使用display:none
样式设置。
Later in the document, I use the logo in this way: 在文档的后面,我以这种方式使用徽标:
<header class="Header">
<h1 class="Header-headline">
<a href="/">
<svg class="Header-logo">
<use xlink:href="#icon-logo"></use>
</svg>
</a>
</h1>
</header>
I want to make the logo a certain height, with an automatic width: 我想让徽标具有一定的高度,并具有自动宽度:
.Header-logo {
height: 5rem;
}
This results in this: 这导致:
Although the height is correct (here, 1rem is 24px), the width remains the default 300px. 虽然高度正确(此处,1rem是24px),但宽度仍然是默认的300px。 Adding
width:auto
causes no changes. 添加
width:auto
不会导致更改。 In researching this problem, I came across several possible solutions here and here . 在研究这个问题时,我在这里和这里遇到了几种可能的解决方案。 However, none have worked with my application: reapplying the viewBox at the point of usage cuts off a large part of the image and using an
<img>
tag is not possible because I need to retain access to the SVG's DOM for styling purposes. 但是,没有一个适用于我的应用程序:在使用时重新应用viewBox会切断图像的大部分,并且使用
<img>
标签是不可能的,因为我需要保留对SVG DOM的访问以用于样式目的。
I could add a hard-coded width based on the known aspect ratio of the image, but this seems to be a non-optimal solution: what if the aspect ratio of the logo changes in the future? 我可以根据已知的图像宽高比添加硬编码宽度,但这似乎是一个非最佳解决方案:如果徽标的宽高比在未来发生变化怎么办? Another option is to define
width:100%
, which does work, however, this makes the 'clickable' area of the <a>
extend across the entire width of the header, which I would like to avoid. 另一种选择是定义
width:100%
,这确实有效,但是,这使得<a>
的“可点击”区域延伸到标题的整个宽度,我想避免。
Is it possible to have an automatically-sized width with a defined height when the viewBox is described in the <symbol>
definition? 当在
<symbol>
定义中描述viewBox时,是否可以使用具有定义高度的自动大小宽度? Must I be relegated to using an <img>
tag or an absolute width for the SVG element? 我是否必须降级为使用
<img>
标签或SVG元素的绝对宽度?
Unfortunately it is the dimensions of the <svg>
element that appears in your <header>
that is important. 不幸的是,
<header>
中出现的<svg>
元素的尺寸很重要。 There is no way to inherit a viewBox
from a child symbol reference. 无法从子符号引用继承
viewBox
。
You would need to copy the viewBox
(width and height) from the symbol. 您需要从符号中复制
viewBox
(宽度和高度)。
.Header-logo { height: 5rem; } .Header-logo2 { height: 8rem; }
<svg class="SpriteSheet" width="0" height="0"> <symbol id="icon-logo" viewBox="-12 -79.61 407.19 108.36"> <path id="logo-upperLeft" d="M0-67.61l83.66 0 0-10 -93.66 0 0 30.92 10 0Z" transform="translate(-2 -2)"></path> <path id="logo-upperRight" d="M383.19-67.61l-83.66 0 0-10 93.66 0 0 30.92 -10 0Z" transform="translate(2 -2)"></path> <path id="logo-lowerLeft" d="M0 16.75l83.66 0 0 10 -93.66 0 0-30.92 10 0Z" transform="translate(-2 2)"></path> <path id="logo-lowerRight" d="M383.19 16.75l-83.66 0 0 10 93.66 0 0-30.92 -10 0Z" transform="translate(2 2)"></path> </symbol> </svg> <header class="Header"> <h1 class="Header-headline"> <a href="/"> <svg class="Header-logo" viewBox="0 0 407.19 108.36"> <use xlink:href="#icon-logo"></use> </svg> </a> </h1> </header> <header class="Header"> <h1 class="Header-headline"> <a href="/"> <svg class="Header-logo2" viewBox="0 0 407.19 108.36"> <use xlink:href="#icon-logo"></use> </svg> </a> </h1> </header>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.