为什么这个svg是裁剪的而不是缩放的？

我是SVG新手，对这个示例被裁剪而不是缩放感到有点惊讶？使用svg元素中的宽度/高度使其具有可伸缩性/可伸缩性缺少什么

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="200px"
     height="200px"
     viewBox="0 0 400px 400px">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
    <circle cx="200px" cy="60px" r="100" fill="red"
                    transform="translate(0,50)" />
    <circle cx="200px" cy="60px" r="100" fill="blue"
                    transform="translate(70,150)" />
    <circle cx="200px" cy="60px" r="100" fill="green"
                    transform="translate(-70,150)" />
  </g>
</svg>

---

因为如果viewBox无效，则视口由最外层元素的宽度和高度决定（在您的示例中，SVG元素位于200x200px）。由于您的内容溢出，因此将对其进行裁剪

通过定义一个400x400的有效viewBox，您在viewBox中为内容提供了足够的空间，但所有内容都进行了缩放以适应SVG元素。viewBox是一种映射到真实空间的虚拟空间

---

这个问题相当复杂。视口和视口框是不同的东西。规范详细介绍了这两个方面：

我发现将viewBox更改为“0 0 400 400”（不带px）会使其缩放而不是裁剪。我的问题仍然有效。为什么上面的例子是作物而不是规模？谢谢。谢谢，理解它如何映射到用户空间仍然有点困惑，但我一定被viewBox/viewPort弄糊涂了。