css – 使用引用的缩放内联SVG符号

我将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>

此定义包含在正文的顶部,并使用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.添加宽度：自动不会导致任何更改.在研究这个问题时,我遇到了几个可能的解决方案here和here.但是,没有一个适用于我的应用程序：在使用点重新应用viewBox会切断图像的大部分并使用< img>标记是不可能的,因为我需要保留对SVG的DOM的访问权限以用于样式目的.

我可以根据已知的图像宽高比添加硬编码宽度,但这似乎是一个非最佳解决方案：如果徽标的宽高比在未来发生变化怎么办？另一种选择是定义宽度：100％,这确实有效,但是,这使得< a>的’可点击’区域成为可能.延伸到标题的整个宽度,我想避免.

当在< symbol>中描述viewBox时,是否可以具有具有定义高度的自动大小的宽度.定义？我必须降级为使用< img>标签或SVG元素的绝对宽度？

解决方法

不幸的是,这是< 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>

原文地址：https://www.jb51.cc/css/215089.html