缩放用 <use> 引用的内联 SVG 符号

Question

我有一个 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 不会导致任何更改。在研究这个问题时，我遇到了几个可能的解决方案here 和here。但是，没有一个与我的应用程序一起使用：在使用点重新应用 viewBox 会切断图像的大部分，并且无法使用 <img> 标签，因为我需要保留对 SVG DOM 的访问权限以进行样式设置。

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

当 viewBox 在<symbol> 定义中描述时，是否可以有一个自动调整大小的宽度和一个定义的高度？我必须降级为使用 <img> 标记或 SVG 元素的绝对宽度吗？

Answer 1

不幸的是，出现在<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>