css - 缩放用 引用的内联 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 设置样式.

在文档的后面，我以这种方式使用 Logo :

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

这导致:

虽然高度是正确的(这里，1rem 是 24px)，宽度仍然是默认的 300px。添加width:auto不会引起任何变化。在研究这个问题时，我遇到了几种可能的解决方案 here和 here .但是，没有一个适用于我的应用程序:在使用时重新应用 viewBox 会切断大部分图像并使用 <img>标记是不可能的，因为我需要保留对 SVG 的 DOM 的访问权限以进行样式设置。

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

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

Answer 1

不幸的是，它是 <svg> 的尺寸出现在您的 <header> 中的元素这很重要。无法继承 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>