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并使用宽度和高度来解决此问题：

<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/。

Chrome中的SVG渲染偏移量

1 个答案: