SVG中元素的z顺序渲染不正确的问题答案

【问题标题】：Issue with z-order of elements in SVG being rendered incorrectlySVG中元素的z顺序渲染不正确的问题
【发布时间】：2019-12-08 05:11:12
【问题描述】：

我创建了一个由以下代码定义的 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>

【问题讨论】：

标签： svg

【解决方案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>

【讨论】：

我尝试了您使用“形状渲染”的建议。它确实解决了 SVG 图像在浏览器中的呈现方式，但它不能解决在 Inkscape 中呈现 SVG 图像或将 SVG 转换为 PNG 文件时的问题。对于我的最终用例，我关心将 SVG 转换为 PNG 时图像的外观。
我刚刚发现shape-rendering="crispEdges 在将 SVG 转换为 PNG 时确实有效，但这取决于转换过程的工作方式。如果我在 librsvg2-bin 提供的 Bash 中使用 rsvg-convert 命令将 SVG 转换为 PNG，问题就解决了。但是，如果我在 ImageMagick 提供的 Bash 中使用 convert 命令，问题仍然存在。如果在 Inkscape 中打开 SVG 文件，然后导出为 PNG，则问题仍然存在。