使用<use>引用的内联SVG符号如何缩放？

Question

使用<use>引用的内联SVG符号如何缩放？

18

我有一个被定义为符号的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>

我想使logo的高度固定，宽度自动调整：

.Header-logo {
    height: 5rem;
}

这导致了如下结果： svg width not scaling

尽管高度是正确的（这里1rem是24px），但宽度仍然保持默认的300px。添加width:auto没有任何变化。在研究此问题时，我找到了几种可能的解决方案，可以在这里和这里找到。然而，这些方法都不能在我的应用程序中使用：重新应用视口框在使用点割掉了图像的一大部分，并且使用<img>标签不可行，因为我需要保留对SVG的DOM的访问权以进行样式设置。

我可以根据已知的图像宽高比添加硬编码宽度，但这似乎是一个非最优解决方案：如果徽标的宽高比将来发生变化怎么办？另一个选择是定义width:100%，这确实可以工作，但这会使<a>的'可点击'区域延伸到整个标题的宽度，而我想避免这种情况。

如果在<symbol>定义中描述了视口框，是否可能具有自动调整大小的宽度和定义的高度？我必须使用<img>标签或SVG元素的绝对宽度吗？

- Scott Colby

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

不幸的是，出现在你的 <header> 中的 <svg> 元素的尺寸非常重要。无法从子符号引用中继承 viewBox。

你需要从该符号中复制 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>