如何设置SVG内部嵌套SVG元素的width与height使其生效？

核心问题原因 #

你遇到的问题核心是个极低门槛但极容易踩的SVG语法坑：SVG标准里的视口属性名是驼峰式viewBox（字母B必须大写），你代码里写的全小写viewbox属于无效属性，浏览器会直接跳过不解析，所有和视口相关的设置自然全部失效。
另外你看到空的内部SVG在开发者工具里显示0x0，是部分版本Chrome开发者工具的显示bug：空的嵌套SVG本身没有任何可见渲染内容，开发者工具的布局面板会错误把它的尺寸计算为0，但实际上视口参数只要写对就会正常生效，不是设置没起作用。

无依赖子元素的正确设置方式 #

嵌套SVG本身就是SVG规范定义的独立视口容器，完全不需要依赖内部子元素撑开，只要属性写法符合规范，就能正常设置尺寸和位置，规则如下：

• 所有SVG标签（外层根SVG、嵌套内部SVG）的视口属性必须严格写为viewBox，XML语法下属性名严格区分大小写，没有容错空间
• 嵌套SVG在父SVG坐标系内的位置，通过x、y属性设置，对应视口左上角在父坐标系中的偏移量，不要尝试用CSS的margin、top/left这类HTML布局属性定位，对SVG内部元素不生效
• 嵌套SVG的尺寸直接通过width、height属性设置即可，不需要提前放矩形之类的占位元素
• 如果需要直观验证空嵌套SVG的实际尺寸，可以给标签加CSS的outline属性描边，不需要添加任何SVG子节点

可直接运行的正确示例 #

<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 无任何子元素的嵌套SVG，位置(30,30)，尺寸40*40，视口规则正常生效 -->
  <svg
    x="30"
    y="30"
    width="40"
    height="40"
    viewBox="0 0 40 40"
    style="outline: 2px solid #2563eb"
  >
    <!-- 此处不需要加任何rect等占位元素，后续添加的子元素会自动遵循当前视口规则渲染 -->
  </svg>
</svg>

补充说明 #

你写的第二段测试代码里内部SVG能看到矩形，只是因为浏览器按照默认规则给没有有效viewBox的SVG做了自适应渲染，不代表你设置的width、height生效了——只要把属性名的大小写修正，哪怕内部完全空，嵌套SVG的视口也会按照你设置的参数创建，后续往里面添加任何图形，都会按照这个视口的坐标系、尺寸规则正常渲染。

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