高度：SVG 上的自动功能不起作用

Answer 1

演示

您需要在链接到的每个元素上定义一个 viewBox。 因为一个 SVG 文档 中可以有不同的元素。

因此，请从链接到的元素中删除

viewBox

。 在您链接的位置添加

viewBox

。

我建议你将 viewBox 添加到 svg 元素中：

<svg class="test" viewBox="0 0 25 25">
    <use xlink:href="/images/iconSprite.svg#clock"/>
</svg>

现在您可以缩放它：

如果定义了 css 宽度：

.test {
    width: 50px;
}

只要适合高度或宽度，它就会显示。

因此，如果您想要响应式设计，只需将其缩放％长度

.test { width:30%; }

缩放 SVG 一篇关于 CSS 技巧缩放 svg 的非常好的文章:)

Answer 2

在旧版本的 Safari 以及一些旧的 Android 浏览器中，设置视图框和宽度是不够的。

在我的例子中，我需要应用 height:100%;以及宽度。

Answer 3

我需要一个全宽的 svg（用作分隔线）。 viewBox 解决方案对我不起作用 - 没有显示图像。我使用 Illustrator 导出 svg。

对我有用的是使用 div （或者在我的例子中是 hr）并照常调整其大小。这实际上适用于任何图像类型，而不仅仅是 svg。

不确定这是否解决了 OP 精灵问题，但它确实解决了标题问题：“高度：SVG 上的自动不起作用”。

.svg-image {    
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
    background-size: cover;
    width: 100vw;
    height: calc(100vw * 50 / 1000); /* viewport width * image height / image width */
  height: 100px;
}

<hr class="svg-image">

使用svg作为背景，然后设置