为什么这个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>
答
因为如果您的视框是无效视口是由最外层的元素的宽度和高度(SVG元素在200x200px你的情况)来确定。由于您的内容溢出,因此会被裁剪。
通过定义一个有效的400x400的viewBox,你给了你的内容在viewBox里面有足够的空间,但它被全部缩放以适应SVG元素。 viewBox是映射到真实空间上的一种虚拟空间。
这个问题相当复杂。视口和viewbox是不同的东西。该规范涵盖了两个细节:http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
+1
谢谢,理解它如何映射到用户空间仍然有点混乱,但我必须被viewBox/viewPort弄糊涂。 – grm 2010-11-29 13:34:31
我发现,将viewBox更改为“0 0 400 400”(不含px)会使其缩放而不裁剪。我的问题仍然有效。为什么上面的例子是裁剪而不是缩放?谢谢。 – grm 2010-11-29 09:19:17