svg - 为什么这个 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>

Answer 1

因为如果您的 viewBox 无效，则视口(viewport)由最外层元素的宽度和高度决定(在您的情况下，SVG 元素为 200x200px)。由于您的内容溢出，因此被裁剪。

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

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