我将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>
此定义包含在的顶部,body
并用设置样式display:none
。
在文档的后面,我以这种方式使用徽标:
<header class="Header">
<h1 class="Header-headline">
<a href="/">
<svg class="Header-logo">
<use xlink:href="#icon-logo"></use>
</svg>
</a>
</h1>
</header>
我想使徽标具有一定的高度,并具有自动宽度:
.Header-logo {
height: 5rem;
}
结果是:
尽管高度正确(此处1rem为24px),但宽度仍为默认的300px。添加width:auto
不会导致任何更改。在研究这个问题时,我在这里和这里遇到了几种可能的解决方案。但是,没有一个可以与我的应用程序一起使用:在使用时重新应用viewBox会切断图像的很大一部分,并且<img>
无法使用标记,因为我需要保留对SVG DOM的访问以进行样式设置。
我可以根据图像的已知长宽比添加硬编码宽度,但这似乎不是最佳解决方案:如果徽标的长宽比将来发生变化,该怎么办?另一个选择是定义width:100%
,它确实起作用,但是,这使<a>
扩展的“可点击”区域跨越了页眉的整个宽度,我想避免这种情况。
在<symbol>
定义中定义viewBox时,是否可以具有自动定义的宽度且具有定义的高度?是否必须让我使用<img>
SVG元素的标签或绝对宽度?
不幸的是,重要的是<svg>
元素中出现的尺寸<header>
。无法viewBox
从子符号引用继承a 。
您需要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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句