如何调整SVG大小？

我有这样的代码：如何调整SVG大小？

<span> 
    <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> 
     <desc></desc> 
     <defs/> 
     <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/> 
     </svg>&nbsp; 
    </span>

我切出大部分的内容，并与...

取代它这目前创建了一个32×32的图标。我想知道的是，我可以使用此代码创建100乘100图标吗？我试着改变宽度和高度，但没有什么区别。

来源

2012-03-01 Samantha J T Star

SVG元素上的width和height属性仅定义了绘图区域的大小。他们不会缩放内容以适应该区域。对于这一点，你需要同时使用viewBox属性，就像这样：

<svg viewBox="0 0 32 32" height="100" width="100" ...>

viewBox属性规定，用于SVG的所有子元素的坐标系。然后，您可以使用宽度和高度将此坐标系拉伸至所需的尺寸。

如果纵横比不匹配，您可以使用preserveAspectRatio属性决定如何缩放。

来源

2012-03-01 18:40:39 mercator

当svg宽度大于视点的宽度时，这似乎不起作用。我用 widged 2014-01-14 01:34:28

@widged，'style'和'width'之间不应该有任何区别和“高度”。因此，我可以在SVG和我之间看到的唯一区别是，您想要将大型SVG缩小为图标大小，而问题是关于缩放图标大小的SVG。该方法仍然相同。 – mercator 2014-01-14 12:55:04

昨天我有一些奇怪的行为，我今天无法复制。可能包含一些错字。 http://bl.ocks.org/widged/8428059上的简单演示显示缩小尺寸确实与尺寸属性或样式相同。 – widged 2014-01-14 23:55:02

如何调整SVG大小？

回答

相关问题