使用<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原因没有变化.在研究这个问题时,我在这里和这里遇到了几种可能的解决方案.但是,没有一个适用于我的应用程序:在使用时重新应用viewBox会切断大部分图像,并且<img>无法使用标记,因为我需要保留对SVG DOM的访问权限以进行样式设置.

我可以根据已知的图像宽高比添加硬编码宽度,但这似乎是一个非最佳解决方案:如果徽标的宽高比在未来发生变化怎么办？另一种选择是定义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>