svg视箱缩放问题

时间:2012-01-13 13:59:00

标签: svg coordinates viewbox

我对svg的viewbox有一个疑问,在我看来它就像一个无限svg计划的窗口,它的边界是在svg元素的viewBox属性中设置的。它表示svg计划中2个坐标之间的矩形。因此,“0 0 1000 500”的viewBox显示svg计划的(0,0)和(1000,500)之间的窗口。 当我制作viewBox(2000,0,3000 500)时,我会看到(2000,0)和(3000,500)的窗口。 x和y缩放未经修改:在两种情况下,我都显示1000 * 500单位的svg计划。

但显然我错了一些地方。我正在尝试动画视图框以模拟某种类型的自动收报机显示,保持y坐标不变,但更改x坐标(不改变显示的实际单位数)但出错了。不知怎的,我的y缩放变化。 在现代浏览器中,您可以验证yourself(拉动滑块以更改viewBox)。 我在SVG规范中错过了什么?

1 个答案:

答案 0 :(得分:4)

您错过了SVG规范中的preserveAspectRatio属性。它会强制默认保留您在视图框中看到的宽高比。听起来就像你在追踪的那样,是另外一个因为尊重比率=“无”