防止 chrome 中的内联 SVG 像素对齐

【问题标题】：Prevent inline SVG pixel snapping in chrome防止 chrome 中的内联 SVG 像素对齐
【发布时间】：2015-06-03 03:20:53
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

viewBox="20 20 900 66"

有一个简单的解决方法 - 只是让 SVG 更高：

viewBox="20 20 900 500"

【讨论】：