为什么我的SVG在更改viewBox属性时不进行缩放

Question

当我将viewBox更改为

0 0 500 500

如下面的示例所示，SVG仍然呈现其“原始”大小为129x129 (在500x500空间内)。

为什么SVG内部的路径不是相对于viewBox扩展的呢？

​

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <defs>
        <style>
          .cls-1{fill:#d9d9d9;}.cls-2{fill:#fff;}.cls-3{fill:#222221;}
        </style>
      </defs>
      <path class="cls-1" d="M420.94,366.76a62.55,62.55,0,1,0-62.54-62.55,62.55,62.55,0,0,0,62.54,62.55" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="36.49 32.43 20.89 48.48 20.89 88.25 62.2 88.25 62.2 32.16 36.49 32.43" />
      <path class="cls-3" d="M394.31,271.33l-17.16,17.16v38.72a5.23,5.23,0,0,0,5.23,5.23h40.51V271.33Zm-.16,5.65v9a2.33,2.33,0,0,1-2.33,2.33h-9ZM419,328.57H382.38a1.37,1.37,0,0,1-1.36-1.36V290.27h10.8a4.27,4.27,0,0,0,4.26-4.27V275.21H419Z" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="88.3 32.43 103.9 48.48 103.9 88.25 62.59 88.25 62.59 32.16 88.3 32.43" />
      <path class="cls-3" d="M447.58,271.33H419v61.11h40.51a5.23,5.23,0,0,0,5.23-5.23V288.49Zm.16,5.65,11.35,11.35h-9a2.33,2.33,0,0,1-2.33-2.33Zm11.77,51.59H422.88V275.21h22.93V286a4.27,4.27,0,0,0,4.26,4.27h10.79v36.94a1.35,1.35,0,0,1-1.35,1.36" transform="translate(-358.4 -241.67)" />
      <rect class="cls-3" x="62.08" y="20.66" width="0.93" height="79.11" />
    </svg>

​

Answer 1

通过更改viewBox，您可以更改边框，即svg元素中可用的空间。如果需要更改图标的大小，请添加宽度。

​

//console.log(box.getBBox())

svg{border:solid; width:100px;}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 125">
      <defs>
        <style>
          .cls-1{fill:#d9d9d9;}.cls-2{fill:#fff;}.cls-3{fill:#222221;}
        </style>
      </defs>
      <g id="box">
      <path class="cls-1" d="M420.94,366.76a62.55,62.55,0,1,0-62.54-62.55,62.55,62.55,0,0,0,62.54,62.55" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="36.49 32.43 20.89 48.48 20.89 88.25 62.2 88.25 62.2 32.16 36.49 32.43" />
      <path class="cls-3" d="M394.31,271.33l-17.16,17.16v38.72a5.23,5.23,0,0,0,5.23,5.23h40.51V271.33Zm-.16,5.65v9a2.33,2.33,0,0,1-2.33,2.33h-9ZM419,328.57H382.38a1.37,1.37,0,0,1-1.36-1.36V290.27h10.8a4.27,4.27,0,0,0,4.26-4.27V275.21H419Z" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="88.3 32.43 103.9 48.48 103.9 88.25 62.59 88.25 62.59 32.16 88.3 32.43" />
      <path class="cls-3" d="M447.58,271.33H419v61.11h40.51a5.23,5.23,0,0,0,5.23-5.23V288.49Zm.16,5.65,11.35,11.35h-9a2.33,2.33,0,0,1-2.33-2.33Zm11.77,51.59H422.88V275.21h22.93V286a4.27,4.27,0,0,0,4.26,4.27h10.79v36.94a1.35,1.35,0,0,1-1.35,1.36" transform="translate(-358.4 -241.67)" />
      <rect class="cls-3" x="62.08" y="20.66" width="0.93" height="79.11" />
      </g>
    </svg>

​

Answer 2

较小的viewbox值将产生更大的“缩放”，因为SVG中的单位将在viewbox中占更大的比例。例如，让我们使用两个不同的viewbox值查看SVG中矩形的y值：

<rect class="cls-3" x="62.08" y="20.66" width="0.93" height="79.11" />

viewbox="0 0 500 500"：矩形y与视图框高度之比为20.66/500

viewbox="0 0 250 250"：矩形y与视箱高度之比为20.66/250

在第二个例子中，y占viewbox高度的比例更大。这表明图像会显得更大。