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

这导致： svg width not scaling

虽然高度正确（此处，1rem是24px），但宽度仍然是默认的300px。添加width:auto不会导致任何更改。在研究此问题时，我遇到了几种可能的解决方案here和here。但是，没有一个适用于我的应用程序：在使用点重新应用viewBox会切断图像的大部分，并且无法使用<img>标记，因为我需要保留对SVG的访问权限DOM用于造型目的。

我可以根据已知的图像宽高比添加硬编码宽度，但这似乎是一个非最佳解决方案：如果徽标的宽高比在未来发生变化会怎么样？另一种选择是定义width:100%，这确实有效，但是，这使得可点击的＆＃39; <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>

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

1 个答案: