定位SVG路径以重叠相对画布

Question

使用Sencha GXT我绘制了Scatter和折线图。两者都在同一个表面上，但是线条和轴元素在SVG上绘制，而在Canvas上绘制散点图。

示例：

<div style="z-index: 1">
    <svg version="1.1" width="1500" height="0" style="overflow: hidden; width: 1426px; height: 872px;">
        <!-- line path -->
        <path style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 11; position: relative;" d="M50.015625,379.09090492081083 L1416,450.2708911321506 " 
        stroke-linecap="BUTT" stroke-linejoin="MITER" stroke-miterlimit="4" stroke="rgb(0, 0, 0)" stroke-width="1.3" fill="rgb(0,0,0)"></path>
    </svg>

    <!-- canvas contains scatter points -->
    <canvas width="1426" height="872" style="overflow-x: hidden; z-index: 1; position: relative; top: -877px; width: 1426px;"></canvas>
</div>

注意散点如何覆盖线条。这是我的问题。你怎么建议我让积分在积分之上？我尝试过使用z-index，但我不知道是否可以设置路径相对于外部元素的z-index（如示例中的路径 - ＆gt; svg-＆gt ;帆布）。我能想到的唯一解决方案是在同一个画布上绘制线条，但我必须重写一些我不太热衷的GXT类。

有什么建议吗？

编辑：

使用java GXT绘制图表，如下所示：

//gxt class com.sencha.gxt.chart.client.chart.series.LineSeries;
LineSeries<> lineSeries = new LineSeries<>(); 

//chart here is com.sencha.gxt.chart.client.chart.Chart
chart.addSeries(lineSeries);
chart.redrawChart();

CustomSeries<> scatter = new CustomSeries<>();
chart.addSeries(scatter);
chart.redrawChart();

//ScatterSeries here is com.sencha.gxt.chart.client.chart.series.ScatterSeries 
CustomSeries extends ScatterSeries {
    //ScatterSeries drawSeries method overriden to draw series on canvas instead of SVG as per default
    //Hence my problem
}