我是 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 无效,则视口(viewport)由最外层元素的宽度和高度决定(在您的情况下,SVG 元素为 200x200px)。由于您的内容溢出,因此被裁剪。
通过定义一个 400x400 的有效 viewBox,您可以在 viewBox 内为您的内容提供足够的空间,但它都被缩放以适应 SVG 元素。 viewBox 是一种映射到真实空间的虚拟空间。
这个问题相当复杂。视口(viewport)和视框是不同的东西。该规范详细介绍了两者:http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
关于svg - 为什么这个 svg 被裁剪而不是缩放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4302253/