嵌套SVG行为疑问：为何内层SVG未按宽高属性显示轮廓？

问题复现代码 #

<svg width="100px" height="100px" viewBox="0 0 100 100" style="outline: 1px solid red">
  <svg width="50px" height="80px" 
    style="outline: 1px solid green"
  >
    <circle cx="25" cy="25" r="10" style="stroke: black; fill: none;"/>
  </svg>
</svg>

行为原因 #

你观察到的内层SVG outline仅包裹circle的现象，核心逻辑是：

• SVG元素的outline是基于它的几何边界盒生成的，这个边界盒由内部所有图形元素的实际范围决定。
• 当嵌套SVG未设置viewBox属性时，它的用户坐标系默认与内部图形的坐标绑定，此时SVG的视口（由width/height定义的尺寸）不会直接作为边界盒的参考，边界盒会自动收缩到能容纳所有内部图形的最小范围。

width和height属性只是定义了SVG的可显示区域，但没有建立用户坐标系到视口的映射关系，所以视口尺寸不会反映到outline的绘制上。

解决方案 #

要让内层SVG的outline显示width/height指定的50px×80px尺寸，只需给内层SVG添加viewBox属性，将用户坐标系范围与视口尺寸对齐：

<svg width="100px" height="100px" viewBox="0 0 100 100" style="outline: 1px solid red">
  <svg width="50px" height="80px" 
    style="outline: 1px solid green"
    viewBox="0 0 50 80"
  >
    <circle cx="25" cy="25" r="10" style="stroke: black; fill: none;"/>
  </svg>
</svg>

添加viewBox="0 0 50 80"后，内层SVG的用户坐标系与视口完全匹配，此时它的几何边界盒就会对应width/height的设置，outline也就会显示完整的绿色框。

内容的提问来源于stack exchange，提问作者ashish singh