javascript - 如何使用 z-index css 覆盖 SVG 折线点

Question

我正在使用 VueJS 和 SVG 创建一个 3D 柱形图，在其中我已经成功地实现了该图表，但在将一组多段线点重叠在一起形成柱状图时遇到了困难。

我的 3D 图表在下面

但我希望列像此示例图表那样叠加

我已经通过在每个系列上用计数器改变索引来设置 z-index，希望它们会相互叠加，但我无法让它工作。

这是我的代码行

<g>
  <template v-for="(points,i) in barColumnPlot">
    <template v-for="(point,j) in points.series">
      <g style="stroke-width:1;" :stroke="point.stroke" :fill="point.stroke" fill-opacity="0.9" :style="'z-index:'+point.zIndex+';'">
        <polyline :points="point.front" />
        <polyline :points="point.right" />
        <polyline :points="point.top" />
      </g>
    </template>
  </template>
</g>

请我需要帮助。

标签： javascripthtmlcssvue.jssvg