Javascript Highcharts注释SVG不'；不要和其他形状一起移动

在我的Highcharts项目中，我成功地将单个注释中的所有形状都设置为可拖动的，但是当我添加SVG（此形状的类型为“路径”）时，SVG不会与注释中的其他形状一起移动

我需要在注释中有一些自定义形状。有人能指出这个SVG的问题是什么吗？是否可以将SVG放在注释中，并且仍然可以拖动？还是我犯了什么错误导致了这个问题

这里是我的例子。如您所见，标签、圆和线都是可拖动的，但SVG形状根本不移动

感谢您阅读我的问题，如果有任何解决方案，我们将不胜感激

 Highcharts.Annotation.prototype.onDrag = function (e) {
        if (this.chart.isInsidePlot(e.chartX - this.chart.plotLeft, e.chartY - this.chart.plotTop)) {
            var translation = this.mouseMoveToTranslation(e),
                xAxis = this.chart.xAxis[0],
                yAxis = this.chart.yAxis[0],
                xStep = this.options.stepX,
                yStep = this.options.stepY,
                pxStep = xAxis.toPixels(xStep) - xAxis.toPixels(0),
                pyStep = yAxis.toPixels(yStep) - yAxis.toPixels(0);

            if (this.options.draggable === 'x') {   //for now, it's exclusive for age handle
                this.potentialTranslationX += translation.x;
                if (Math.abs(this.potentialTranslationX) >= Math.abs(pxStep)) {
                    translation.x = (this.potentialTranslationX > 0) ? pxStep : -pxStep;
                    translation.y = 0;
                    this.currentXValue += (this.potentialTranslationX > 0) ? xStep : -xStep;
                    this.potentialTranslationX -= (this.potentialTranslationX > 0) ? pxStep : -pxStep;    //minus the step and continue to cumulate
                    //this.potentialTranslation = 0;    //not correct, the mouse will go faster than the handle

                    if (this.points.length) {
                        this.translate(translation.x, 0);
                    } else {
                        this.shapes.forEach(function (shape) {
                            shape.translate(translation.x, 0);
                        });
                        this.labels.forEach(function (label) {
                            label.translate(translation.x, 0);
                            label.text = label.annotation.options.preText + label.annotation.currentXValue;
                        });
                    }
                }
            }


            this.redraw(false);
        }
    }

更新1：在我的图表上尝试了塞巴斯蒂安的答案后，结果证明很难计算出正确的坐标。最后，我使用类型“图像”来显示形状。这个形状是一个非常棒的字体图标，所以在使用“image”之前，我尝试添加一个带有“useHTML”的标签：true，但在第一次重画之后，图标似乎移动了一点（false），不知道为什么

我不建议用这种方法创建可拖动的自定义形状。此选项可按预期创建形状，但也可设置固定位置。也许可以实现move功能，但我认为需要对可拖动的核心代码进行大量更改

我的建议是这样做：

annotations: [{
 draggable: 'x',
 shapes: [{
   points: [{
     x: 440,
     y: 72
   }, {
     x: 410,
     y: 45
   }, {
     x: 470,
     y: 45
   }, {
     x: 440,
     y: 72
   }],
   fill: 'red',
   type: 'path',
   stroke: "blue",
   strokeWidth: 3,
   markerStart: 'circle',
 }]
}]

其中markerStart是一个定义的形状。

---

嗨，塞巴斯蒂安，谢谢你的回答。但在我的图表上试过之后，结果证明很难计算出正确的坐标。最后，我使用类型“图像”来显示形状。这个形状是一个非常棒的字体图标，所以在使用“image”之前，我尝试添加一个带有“useHTML”的标签：true，但在第一次重画之后，图标似乎移动了一点（false），不知道为什么。

annotations: [{
 draggable: 'x',
 shapes: [{
   points: [{
     x: 440,
     y: 72
   }, {
     x: 410,
     y: 45
   }, {
     x: 470,
     y: 45
   }, {
     x: 440,
     y: 72
   }],
   fill: 'red',
   type: 'path',
   stroke: "blue",
   strokeWidth: 3,
   markerStart: 'circle',
 }]
}]