SVG中元素的z顺序显示不正确的问题

Question

我按照以下代码定义创建了SVG图片。我遇到的问题是SVG图像显示不正确。我的SVG中元素的z顺序被错误地渲染。

问题：存在3个矩形（颜色=白色），它们位于另一个矩形（颜色=红色）上方。这些3x矩形的位置与后面的红色矩形具有相同的y轴，并且具有相同的高度。尽管具有这种定位/高度，但由于背面的红色矩形，在白色矩形的边缘上似乎仍然可以看到“红色”边框。似乎未遵守渲染图像中元素的z顺序或堆叠顺序。

下面是在Inkscape中打开的SVG图像的屏幕截图，显示了问题。即使将SVG图像转换为PNG，z顺序问题仍然存在。

在对该位置进行故障排除后，我发现该问题随机消失，具体取决于y轴位置或SVG图像大小（像素/宽度/高度）的值。例如，如果您将SVG从y="2.5807"更改为y="2.5"，则问题仍然存在。但是，这对于我的问题而言不是可行的解决方案，但是确切的位置和SVG图像大小属性已固定是不能更改的。

更新

• 我尝试过@Robert Longson建议在根SVG上使用shape-rendering="crispEdges"。它没有解决我的用例的问题。根据他的建议，它确实解决了如何在浏览器中呈现图像的问题，但是在Inkscape中或将SVG转换为PNG时，该问题仍然可见。对于我的用例，我关心的是将SVG转换为PNG后如何呈现。
• 我刚刚发现shape-rendering="crispEdges在SVG转换为PNG时确实有效，但是取决于转换过程的工作方式。如果我在 librsvg2-bin 提供的Bash中使用rsvg-convert命令将SVG转换为PNG，则此问题已解决。但是，如果我在 ImageMagick 提供的Bash中使用convert命令，则该问题仍然存在。如果在Inkscape中打开SVG文件，然后再导出为PNG，则问题仍然存在。

<svg baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" width="912px" height="1140px" preserveAspectRatio="none" viewBox="0,0,8.0,5.0">
    <rect x="0" y="0" width="8.0" height="5.0" fill="white" />
    <rect x="0" y="2.5807" width="8.0" height="1.0" fill="red" />
    <g transform="translate(2.9275,0)">
        <rect x="0" y="2.5807" width="0.5" height="1.0" fill="white" />
        <rect x="1.0" y="2.5807" width="1.0" height="1.0" fill="white" />
        <rect x="2.5" y="2.5807" width="1.5" height="1.0" fill="white" />
    </g>
</svg>

Answer 1

这是抗锯齿，您可以使用shape-rendering =“ crispEdges”将其关闭

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="912px" height="1140px" preserveAspectRatio="none" viewBox="0,0,8.0,5.0" shape-rendering="crispEdges">
    <rect x="0" y="0" width="8.0" height="5.0" fill="white" />
    <rect x="0" y="2.5807" width="8.0" height="1.0" fill="red" />
    <g transform="translate(2.9275,0)">
        <rect x="0" y="2.5807" width="0.5" height="1.0" fill="white" />
        <rect x="1.0" y="2.5807" width="1.0" height="1.0" fill="white" />
        <rect x="2.5" y="2.5807" width="1.5" height="1.0" fill="white" />
    </g>
</svg>