SVG viewBox,宽度,高度等困惑
如果我对SVG的理解是正确的,那么以下两个SVG描述将导致相同的图像,但它们不会.(注意:两个代码清单的区别仅在于其svg标签中的坐标值.更具体地说,对于第一个清单中的每个(x,y)对,第二个清单中都有(x -205,y -55)对.)
<!DOCTYPE html>
<html>
<head><title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="0" y="0" width="210" height="60" viewBox="0 0 210 60">
<g style="stroke: black; fill: none;">
<path d="M 5 5 Q 105 55 205 55"/>
</g>
</svg>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="-205" y="-55" width="210" height="60" viewBox="-205 -55 5 5">
<g style="stroke: black; fill: none;">
<path d="M -200 -50 Q -100 0 0 0"/>
</g>
</svg>
</body>
</html>
事实上,根据Firefox的说法,它们看起来完全不同.我对它们所期望的渲染是Firefox为第一个渲染的(即,从左到右平缓地向下倾斜的曲线,初始斜率为-1/2,最终斜率为0).我完全被FF为第二个产生的东西所迷惑,因为,AFAICT,第二个规范是第一个规范的向量(-205,-55)的简单批发("刚性")翻译.
为什么两个显示器看起来不一样？
Fiz*_*izz 14
有关viewBox的精度,请参阅本文中的(仅)图:https://software.intel.com/en-us/html5/blogs/viewbox-a-window-into-the-soul-of-svg,为方便起见,下面内联:
那张照片值得1000字解释.
宽度和高度参数,也就是W3C术语中的视口是另一回事.但是你没有在上面的例子中改变它们.有一个稍微复杂的算法,用于确定SVG的宽度和高度是否实际执行任何操作,因为它们可以被覆盖,例如通过<object>将SVG嵌入HTML页面的标记.在http://www.w3.org/TR/SVG/coords.html#ViewportSpace上解释了更多的角落案例.有关此视口问题的更直观(也许更平易近人)的解释,您还可以参考Inkscape手册http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html(作为除此之外,还有一个扩展可用于从Inkscape http://pernsteiner.org/inkscape/viewbox/直观地设置viewBox ;您实际上不必像Inkscape手册那样直接编辑XML [仍然].)
| 归档时间： |
|
| 查看次数： |
10251 次 |
| 最近记录： |