SVG viewBox,宽度,高度等困惑

时间:2013-01-27 23:06:45

标签: svg

如果我对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)的简单批发(“刚性”)翻译。

  

为什么两个显示器看起来不一样?

3 个答案:

答案 0 :(得分:13)

对于viewBox上的精度,请参阅本文中的(仅)图:https://software.intel.com/en-us/html5/blogs/viewbox-a-window-into-the-soul-of-svg,为方便起见,下面内联:

viewBox in a nutshell

这张照片值得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-xmin-yviewBox的最左侧和最顶部坐标 - 有效地将0, 0位置更改为min-x, min-y,并且实际上仅与坐标系相关viewBox(and by extension to your路径's d attribute), not to sizing of the viewBox`本身。

此外,svg节点的x和y位置有效但被忽略,与任何放置无关。

为了让您的第二条路径看起来像第一条路径,您可以删除xy属性,并更改widthheight内的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}}