如何调整SVG的大小？

Question

我有这样的代码:

  <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的图标吗？我尝试改变宽度和高度,但没有区别.

Answer 1

的width和height的SVG元素的属性只定义绘图区域的尺寸.它们不会缩放内容以适合该区域.为此,您还需要使用该viewBox属性,如下所示:

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

viewBox属性建立用于SVG的所有子元素的坐标系.然后,您可以使用宽度和高度将此坐标系拉伸到所需的大小.

preserveAspectRatio如果宽高比不匹配,您可以使用该属性来决定如何缩放.