如果我对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)的简单批发(“刚性”)翻译。
为什么两个显示器看起来不一样?
答案 0 :(得分:13)
对于viewBox上的精度,请参阅本文中的(仅)图:https://software.intel.com/en-us/html5/blogs/viewbox-a-window-into-the-soul-of-svg,为方便起见,下面内联:
这张照片值得1000字解释。
宽度和高度参数,也就是W3C术语中的视口是另一回事。但是你并没有改变上面例子中的那些。有一个稍微复杂的算法,用于确定SVG的宽度和高度是否实际执行任何操作,因为它们可以被覆盖,例如通过将SVG嵌入HTML页面的<object>
标记。在http://www.w3.org/TR/SVG/coords.html#ViewportSpace解释了更多的角落案例。对于此视口问题的更直观(也许更平易近人)的解释,您还可以参考Inkscape手册http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html(另外,还有一个扩展可用于从Inkscape {可视化地设置视图框} { {3}};您不必像Inkscape手册那样直接编辑XML。[仍然]说。)
答案 1 :(得分:12)
因为viewbox的坐标不是x1,y1,x2,y2 - 它们是minx, miny, width and height。
答案 2 :(得分:0)
在这个问题上已经很晚了,但要澄清迈克尔为未来的观众做出的一点:
如果你改变了这里的一些数字,但不是很多,你会得到相同的结果。
您遇到的一个问题是,您认为{svg节点中的min-x + width
应该是相同的。 min-x
和min-y
是viewBox
的最左侧和最顶部坐标 - 有效地将0, 0
位置更改为min-x, min-y
,并且实际上仅与坐标系相关viewBox(and by extension to your
路径's
d attribute), not to sizing of the
viewBox`本身。
此外,svg
节点的x和y位置有效但被忽略,与任何放置无关。
为了让您的第二条路径看起来像第一条路径,您可以删除x
和y
属性,并更改width
和height
内的viewBox
和<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="210" height="60" viewBox="-205 -55 210 60">
<g style="stroke: black; fill: none;">
<path d="M -200 -50 Q -100 0 0 0"/>
</g>
</svg>
个数字1}}匹配第一个:
{{1}}