如何让SVG精确包裹内容，使SVG尺寸等同于内部图形尺寸？

原代码 #

React结构：

<div>
  <svg className="main-svg">
    <circle pathLength="25" cx="50%" cy="50%" r="25%" />
  </svg>
</div>

样式：

svg {
  height: 250px;
  width: 250px;
}

问题 #

设置SVG宽高为250px后，SVG确实占据了该尺寸，但内部circle元素明显偏小，周围存在多余空白。需要让SVG精确包裹circle，使得设置SVG的宽高就等同于设置内部circle的宽高。

解决方案 #

问题根源在于SVG默认的视口（viewBox）与circle的尺寸不匹配，导致circle在缩放后的SVG中占比不足。只需调整SVG的viewBox属性，并同步修改circle的参数，即可实现精确包裹：

修改后的React结构：

<div>
  <svg className="main-svg" viewBox="0 0 100 100">
    <circle pathLength="25" cx="50" cy="50" r="50" />
  </svg>
</div>

样式保持不变。

原理说明

• viewBox="0 0 100 100"定义了SVG内部的坐标系统为100×100的画布，内部元素的数值会按比例映射到SVG的实际宽高。
• circle的r="50"表示半径为50（占整个viewBox宽度的一半），cx="50"、cy="50"将圆心定位在viewBox中心，此时circle刚好填满整个viewBox。
• 当SVG设置为250px宽高时，整个viewBox会被等比例缩放至250×250，circle自然也会填满整个SVG，完全消除多余空白。

如果想要保留circle的百分比参数，也可以这样设置：

<div>
  <svg className="main-svg" viewBox="0 0 100 100">
    <circle pathLength="25" cx="50%" cy="50%" r="50%" />
  </svg>
</div>

效果完全一致，只是用百分比替代了具体数值。

内容的提问来源于stack exchange，提问作者sir-haver