缩放用<use>引用的嵌入式SVG符号

斯科特·科尔比

我将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;
}

结果是: svg宽度未缩放

尽管高度正确(此处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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章