Question

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

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

Answer 1

对于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。[仍然]说。）

Answer 2

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

Answer 3

在这个问题上已经很晚了，但要澄清迈克尔为未来的观众做出的一点：

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

您遇到的一个问题是，您认为{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}}

SVG viewBox，宽度，高度等困惑

3 个答案: