如何解决嵌套SVG内部元素设置宽高后仍显示为0的问题？

咱们先捋清楚问题根源：你写的内部SVG虽然设置了width和height，但因为它没有任何可见内容，也未定义viewBox，浏览器无法识别它的渲染范围，所以实际显示的宽高为0。下面给你几个实用的解决办法：

方法1：给内部SVG添加可见内容 #

最直接的方式是在内部SVG里加入图形元素，比如一个填充矩形，让浏览器明确感知它的尺寸：

<svg width="200" height="200" style="border:1px solid #ccc;">
  <!-- 内部SVG添加矩形作为背景，直观显示100x100的尺寸 -->
  <svg width="100" height="100">
    <rect width="100%" height="100%" fill="#f0f0f0" />
  </svg>
</svg>

方法2：为内部SVG设置viewBox属性 #

viewBox定义了SVG的坐标系统和视口范围，哪怕没有内容，也能让浏览器确认它的尺寸边界。设置与宽高匹配的viewBox即可：

<svg width="200" height="200" style="border:1px solid #ccc;">
  <svg width="100" height="100" viewBox="0 0 100 100">
    <!-- 即使暂时无内容，SVG也会占据100x100的空间 -->
  </svg>
</svg>

方法3：调整内部SVG的布局样式 #

部分浏览器会把内部SVG当作内联元素处理，你可以通过CSS强制它以块级元素显示，确保尺寸生效：

<svg width="200" height="200" style="border:1px solid #ccc;">
  <svg width="100" height="100" style="display:block;">
    <rect width="100%" height="100%" fill="#eee" />
  </svg>
</svg>

额外小技巧：定位内部SVG #

如果需要调整内部SVG在外部SVG中的位置，直接添加x和y属性即可：

<svg width="200" height="200" style="border:1px solid #ccc;">
  <svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
    <rect width="100%" height="100%" fill="#ddd" />
  </svg>
</svg>

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