javascript - SVG“z-index”解决方法

Question

我正在开发一个显示三个仪表的仪表板，每个仪表都突出显示形成“甜甜圈图”的数据集的某些部分。该设计要求数据集突出显示部分的笔画为 4px，但由于 SVG 绘制顺序，当数据集中的最后一个项目的笔画重叠时，这将成为一个问题。见图片。https://imgur.com/KYRnVJS

有人有任何聪明的解决方法吗？

Answer 1

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