为何嵌套SVG元素的内容会显示在viewbox范围之外？

这个问题其实是SVG里一个容易被误解的默认行为——默认情况下，SVG元素并不会自动裁剪超出其viewBox范围的内容！

核心原因：overflow属性的默认值 #

SVG元素的overflow属性默认值是visible，这意味着不管子元素的位置有没有超出当前SVG的viewBox定义的区域，都会完整渲染出来，不会被裁剪。你可能会误以为viewBox会自动“框住”内容，但实际上它只是定义了SVG的坐标系统和视口映射关系，裁剪功能需要靠overflow属性来触发。

结合你的代码分析 #

看你提供的示例代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 400 400">
  <svg viewBox="0 0 400 100" y="20" width="400">
    <rect x="0" y="-100" width="79" height="100" fill="#ff0000"></rect>
  </svg>
  <rect x="100" y="0" width="79" height="400" fill="#ff0000"></rect>
</svg>

内部SVG的viewBox="0 0 400 100"只是把它的坐标系统设置为从(0,0)到(400,100)的矩形，但因为没有设置overflow，默认的visible让那个y="-100"的红色矩形（完全在viewBox的y范围之外）依然能显示出来。

解决方案：添加overflow="hidden" #

如果想要让内部SVG裁剪掉超出viewBox的内容，只需要给内部SVG加上overflow="hidden"属性即可：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 400">
  <svg viewBox="0 0 400 100" y="20" width="400" overflow="hidden">
    <rect x="0" y="-100" width="79" height="100" fill="#ff0000"></rect>
  </svg>
  <rect x="100" y="0" width="79" height="400" fill="#ff0000"></rect>
</svg>

修改后，那个y=-100的矩形就会被内部SVG的边界裁剪，不会再显示出来了。

另外补充一下：overflow还有scroll（会显示滚动条，SVG场景中很少用到）、auto（自动判断是否需要裁剪）等可选值，但hidden是实现裁剪需求最常用的选项。

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