为什么这个svg被裁剪并且没有缩放？

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

来源

2010-11-29 grm

我发现，将viewBox更改为“0 0 400 400”（不含px）会使其缩放而不裁剪。我的问题仍然有效。为什么上面的例子是裁剪而不是缩放？谢谢。 – grm 2010-11-29 09:19:17

因为如果您的视框是无效视口是由最外层的元素的宽度和高度（SVG元素在200x200px你的情况）来确定。由于您的内容溢出，因此会被裁剪。

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

这个问题相当复杂。视口和viewbox是不同的东西。该规范涵盖了两个细节：http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

来源

2010-11-29 09:32:15 SpliFF

谢谢，理解它如何映射到用户空间仍然有点混乱，但我必须被viewBox/viewPort弄糊涂。 – grm 2010-11-29 13:34:31

为什么这个svg被裁剪并且没有缩放？

回答

相关问题