这个问题在这里已有答案:
我想使用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 transform 应用于SVG标记的内容,如下所示:
transform
<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>
1 回答
您可以使用的第一个也许是最好的方法就是使用viewBox属性 . 这将使svg标记的内容自动占用svg标记本身的定义宽度和高度,只显示定义边界内的内容 . 例如:
或者,您可以将svg
transform
应用于SVG标记的内容,如下所示:最后,您可以尝试使用CSS3
transform
来缩放整个svg元素 . 这是最不受支持的方法,但无论如何我都提到它,因为你最初要求的是CSS解决方案 . 我强烈建议使用上述解决方案之一,如果可能的话 .