是否可以使用CSS扩展内联SVG？

我想使用CSS样式来控制SVG设计的大小。例如

.svg { width:100%; }

当我从文件中嵌入SVG图像时，它与任何其他图像一样工作正常：

<img src="image.svg" class="svg" />

但当我使用内联SVG时，它不起作用：

<svg class="svg">...</svg>

。。。

svg“框”将增长，但内容保持不变

---

有什么方法可以做到这一点吗？

您可以使用的第一种可能也是最好的方法就是使用该属性（该属性区分大小写）。这将使svg标记的内容自动占据svg标记本身定义的宽度和高度，只显示定义边界内的内容。例如：

<svg width="82" height="82" viewBox="0 0 102 102">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>

最后，您可以尝试使用CSS3

transform

来缩放整个svg元素。这是最不受支持的方法，但我还是提到了它，因为您最初要求使用CSS解决方案。不过，如果可能的话，我强烈建议使用上述解决方案之一

<svg width="102" height="102" style="transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>

富巴巴兹

这个问题不是重复的！另一个根本没有提到CSS。在这里，作者询问如何使用CSS实现这一点。这是一个完全不同的问题。它可能不是一个直接的副本，但这个问题似乎与

viewBox

（即“svg'box'将增长，但内容保持不变”）有关，下面的和答案解决了这个问题。另请参见。没有办法在CSS中使用正常宽度/高度属性进行缩放？根据我写这篇文章时做的一些测试，这是相当有限的。我认为问题在于SVG使用了一组单独的CSS规则，其中一些是通过宽度和高度属性继承的。如果更改CSS维度，SVG图像本身将不会随之缩放。但是由于CSS3转换现在得到了广泛的支持，如果您仅限于编辑CSS（如果您没有访问HTML代码的权限），那么您当然可以使用它。添加

preserveSpectratio=“xMinYMin meet”

属性可能是一件好事

svg{width:100%；}

尝试将其应用于SVG元素而不是类。这对我来说很有用。这已经很晚了，但是css风格的缩放：0.8可以工作

<svg width="102" height="102" style="transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>