Javascript SVG“z索引”解决方案

我正在开发一个仪表板，它显示三个仪表，每个仪表都突出显示数据集的某个部分，形成一个“甜甜圈图”。该设计要求在数据集中突出显示的部分使用4px笔划，但由于SVG的绘制顺序，当数据集中的最后一个项目的笔划重叠时，就会出现问题。参见图

---

有人有聪明的解决办法吗

有一些解决方法，但它们往往是黑客攻击。例如，您可以在另一个内联SVG中绘制灰色背景，该内联SVG的z索引位于绘制突出显示部分的内联SVG下方。正确的答案是先画背景，然后画所有的亮点。

应该会有帮助。您需要绘制4个笔划项目。