是可以扩展内联SVG的CSS？

我想使用CSS样式来控制SVGdevise的大小。 例如…

.svg { width:100%; } 

当我从一个文件中embedded一个SVG图像时，它就像任何其他图像一样工作正常，

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

但是，当我使用内联SVG它不工作：

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

svg“盒子”会增长，但内容保持不变。

有没有办法做到这一点？

Answer 1

您可以使用的第一个也许是最好的方法是使用viewBox属性。 这将使得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> 

或者，您可以将SVG transform应用于SVG标记的内容，如下所示：

 <svg width="82" height="82"> <g 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> </g> </svg> 

最后，你可以尝试使用CSS3 transform来缩放整个svg元素。 这是最不被支持的方法，但是无论如何，因为您最初要求提供CSS解决scheme。 我强烈build议使用上述解决scheme之一，如果这是可能的。

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