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无效，则视口由最外层元素的宽度和高度决定（在您的情况下，SVG元素为200x200px）。由于您的内容溢出，因此会被裁剪。

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

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

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

1 个答案: