我正在使用多个不同颜色的矩形来构建 SVG 数据可视化。这很好用,但有时背景颜色会在矩形之间渗出。我正在使用 Chrome 浏览,但其他浏览器似乎也受到了类似的影响。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10.5" y="10" height="100" width="100"
style="stroke:none; fill: #00cc00"/>
<rect x="110.5" y="10" height="100" width="100"
style="stroke:none; fill: #00cc00"/>
</svg>
在 Chrome 中,如果 x 偏移量是整数,则该行不可见。
我确信我可以通过使矩形比它们必须占据的空间大一点来避免线条。但这似乎是一个 hack:是否有 SVG 惯用语或最佳实践来实现没有“灌浆”的完美平铺形状?
我还担心渲染性能,因为我的可视化效果可能非常大(比如 100MB XML .svg)。我希望能够向渲染器提供提示,例如“此 <g>
中的所有形状都不重叠”?
最佳答案
这是在形状和背景之间起作用的抗锯齿。如果你想关闭它,请在形状上设置 shape-rendering="crispEdges"。您可以在矩形元素或 <svg>
上设置它在这种情况下,矩形元素将继承它。
您可以通过向坐标添加 0.5 来调整直线的位置。查看cairo FAQ有关这方面的更多详细信息。
关于layout - 避免平铺 SVG 形状之间的线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29004912/