23

如果我对 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）。

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

4

3 回答 3

36

有关 viewBox 的详细信息，请参见本文中的（唯一）图：https ://web.archive.org/web/20140119030353/https://software.intel.com/en-us/html5/blogs/viewbox- a-window-into-the-soul-of-svg，为方便起见，内联如下：

简而言之，viewBox

那张图值得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 直观地设置 viewBoxhttp://pernsteiner.org/inkscape/viewbox/；您实际上不必像 Inkscape 手册 [仍然] 所说的那样直接编辑 XML。）

于 2014-08-01T03:43:48.210 回答
17

因为 viewbox 的坐标不是 x1, y1, x2, y2 - 它们是minx, miny, width 和 height。

于 2013-01-28T05:01:55.243 回答
2

这一点很晚，但为了澄清迈克尔在上面为未来的观众提出的一点：

如果你在这里改变一些数字，但不是很多，你会得到相同的结果。

您遇到的一个问题是您认为这min-x + width在任一 svg 节点中应该是相同的。min-x并且min-y是您的最左边和最上面的坐标viewBox- 有效地将0, 0位置更改为min-x, min-y, 并且实际上只与viewBox( 并通过您path的d属性扩展) 的坐标系相关，而不是与viewBox自身的大小有关。

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

所以要让你的第二条路径看起来像你的第一条，你可以去掉xandy属性，并改变里面的widthandheight数字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>
于 2014-03-04T22:51:42.693 回答