Chrome 中的 SVG 渲染偏移

Question

我在 Chrome 中渲染 SVG 时遇到了一个奇怪的行为（错误？）。我想在背景图像中使用 SVG 精灵。这样，我想通过相应地设置背景位置来访问多种颜色。虽然这似乎可行，但 Chrome 正在偏移 SVG，因此它不会在正确的位置呈现。看起来背景位置不在 (0, 0)...

有趣的是，Chrome 并不总是抵消它...通过更改 div 的宽度/高度值，SVG 会快速恢复到某些宽度/高度的正确位置。这是我为展示问题而创建的一支笔：https://codepen.io/thoro/pen/XpedPR

如果您在 Chrome 中打开触控笔，箭头精灵将会偏移，因此黑色箭头不会完全可见。通过将 $box 属性更改为 66px，箭头将捕捉到正确的位置，以便在增加数字时再次偏移...

在 Firefox 中，箭头按预期呈现。 （IE 是另一回事，但在这里无关紧要）

我正在尝试显示的 SVG：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 120">
    <title>grid-link</title>

    <symbol id="my" viewBox="0 0 10 120">
        <path d="M6.1 7.7l.6.6L10 5 6.7 1.7l-.6.6 2.3 2.3H0v.8h8.4L6.1 7.7z"/>
    </symbol>

    <use xlink:href="#my" y="0" fill="#000"/>
    <use xlink:href="#my" y="110" fill="#fff"/>
</svg>

我做错了吗？有没有办法解决这个问题？

---

---

这个问题可以通过移除 viewBox 并使用 width 和 height 来解决：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="10" height="110">
    <title>grid-link</title>

    <symbol id="my">
        <path d="M6.1 7.7l.6.6L10 5 6.7 1.7l-.6.6 2.3 2.3H0v.8h8.4L6.1 7.7z"/>
    </symbol>

    <use xlink:href="#my" y="0" fill="#000"/>
    <use xlink:href="#my" y="110" fill="#fff"/>
</svg>

Answer 1

您的问题在于 ViewBox。您将 ViewPort（通过 div 的宽度和高度）指定为 65 x 65，但将 ViewBox 高度设置为 120。

如果您从 SVG 中完全删除 ViewBox，它会解决您描述的问题（并在您更改 $box 时使生成的图标可伸缩）。

Sara Soueidan 在她的博客上写了一篇非常有用的关于 ViewPort、ViewBox 和 SVG 坐标系的文章：https://sarasoueidan.com/blog/svg-coordinate-systems/。