html - 防止 chrome 中的内联 SVG 像素捕捉

Question

我有一个 svg，用于在 div 上显示波浪边。 svg 需要显示为与 div 相同，但由于某些子像素捕捉/舍入，对齐方式会随着您调整大小而变化。 Firefox 似乎工作正常。看演示:

https://jsfiddle.net/meojwnLv/

当使用 svg 作为背景图片时 background-size:100% auto; 它可以正确缩放，但我希望能够更改颜色所以需要它是内联的。

如何防止这种情况发生？ 谢谢

Answer 1

看起来 Chrome 正在将 SVG 对象的高度和宽度对齐为整数值。由于 SVG 的宽度远大于其高度，因此 SVG 高度每变化 1px 都会导致宽度变化约 10px。

viewBox="20 20 900 66"

有一个简单的解决方法——让 SVG 更高:

viewBox="20 20 900 500"

Here's an updated JSFiddle.