Safari 中重复的 svg 背景间隙

Question

我创建了以下代码笔来演示该问题：

http://codepen.io/perrin4869/pen/rWdWMm

在 Chrome、Firefox 和 IE11 中，它按预期工作 - 背景水平重复。然而，在 Safari 中，在文档的特定高度（例如 439px），您可以看到 svg 背景图像的重复之间的间隙... 我尝试过更改 svg 的设置，例如使

width

、

height

、

viewport

值全部为整数，并尝试使用所有可能的值来设置

preserveAspectRatio

属性，但差距仍然存在......

有人知道为什么会发生这种情况，以及如何解决这个问题吗？谢谢！

Answer 1

对于遇到此情况的任何人。我的解决方案是将背景大小设置为 101%。这是我能想到的唯一有效的方法。虽然不太理想。

Answer 2

<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
   <!-- Your SVG content here -->
</svg>

使用 shape-rendering 属性：您可以尝试在 SVG 元素上使用 shape-rendering 属性来控制它们的渲染方式。设置 shape-rendering="crispEdges" 可以帮助避免抗锯齿并可能减少间隙。