为什么这个SVG被裁剪而不是缩放？

Question

我对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>

- grm

---

我发现将viewBox更改为“0 0 400 400”（不带px）可以使其缩放而不是裁剪。但我的问题仍然存在。为什么上面的例子会裁剪而不是缩放呢？谢谢。 - grm

Answer 1

如果你的viewBox无效，视口就由最外层元素（在你的情况下是200x200px的SVG元素）的宽度和高度确定。由于你的内容超出了这个范围，因此被裁剪了。

通过定义一个有效的400x400 viewBox，你给了你的内容足够的空间，但它们都被缩放以适合SVG元素内部。viewBox是一种虚拟空间，映射到真实空间。

问题相当复杂。视口和viewBox是不同的东西。规范详细介绍了两者：http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

- SpliFF

---

谢谢，我还是有点困惑这如何映射到用户空间，但我可能被viewBox/viewPort搞混了。 - grm