如果我对 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) 的简单批发（“刚性”）翻译。
为什么两个显示器看起来不一样？
有关 viewBox 的详细信息，请参阅本文中的（唯一）图：https://web.archive.org/web/20140119030353/https://software.intel.com/en-us/html5/blogs/viewbox-a-window-into-the-soul-of-svg https://web.archive.org/web/20140119030353/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 http://www.w3.org/TR/SVG/coords.html#ViewportSpace。有关此视口问题的更直观（也许更平易近人）的解释，您还可以查阅 Inkscape 手册http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html（顺便说一句，有一个扩展可用于从 Inkscape 中直观地设置 viewBoxhttp://pernsteiner.org/inkscape/viewbox/ http://pernsteiner.org/inkscape/viewbox/您实际上不必像 Inkscape 手册[仍然]所说的那样直接编辑 XML。）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
