参见英文答案 >
How to make a <svg> element expand or contract to its parent container?5个答案我想使用CSS样式来控制SVG设计的大小。例如…
.svg { width:100%; }
当我从一个文件嵌入SVG图像，它像任何其他图像一样工作正常：
<img src="image.svg" class="svg" />
但是当我使用内联SVG它不工作：
<svg class="svg">...</svg>
svg“框”将增长，但内容保持不变。
有没有办法做到这一点？
解决方法
你可以使用的第一个也许最好的方法是使用
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 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解决方案。我强烈建议使用上述解决方案之一，虽然，如果这是可能的。
<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>
