javascript 如何调整 SVG 的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9521647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I resize an SVG?
提问by Samantha J T Star
I have code like this:
我有这样的代码：
<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>
</span>
I cut out most of the content and replaced it with ...
我删掉了大部分内容，并用......
This presently creates a 32 by 32 icon. What I would like to know is can I use this code to create a 100 by 100 icon? I tried changing the width and height but it made no difference.
这目前创建了一个 32 x 32 的图标。我想知道的是我可以使用此代码创建一个 100 x 100 的图标吗？我尝试更改宽度和高度，但没有任何区别。
回答by mercator
The widthand heightattributes on the SVG element only define the size of the drawing area. They don't scale the contents to fit that area. For that, you need to also use the viewBoxattribute, like so:
的width和height的SVG元素的属性只定义绘图区域的尺寸。他们不会缩放内容以适合该区域。为此，您还需要使用该viewBox属性，如下所示：
<svg viewBox="0 0 32 32" height="100" width="100" ...>
The viewBox attribute establishes the coordinate system that is used for all the child elements of the SVG. You can then use the width and height to stretch this coordinate system to the desired size.
viewBox 属性建立了用于 SVG 的所有子元素的坐标系。然后，您可以使用宽度和高度将此坐标系拉伸到所需的大小。
You can use the preserveAspectRatioattribute to decide how to scale if the aspect ratios don't match.
preserveAspectRatio如果纵横比不匹配，您可以使用该属性来决定如何缩放。
