Javascript 属性'marker mid'不'；绘制三次bezier路径时不起作用

我目前正在做一个图形绘制程序。当我编写代码时，我决定用三次贝塞尔路径绘制环到那些自连接的边，并在连接到其他节点的边上绘制公共椭圆弧。此外，我打算使用

marker mid

属性向这些边缘添加标签。但奇怪的是，标签没有显示在自连接的边上（三次贝塞尔曲线路径），但它可以正确显示在连接到其他节点的边上（椭圆弧路径）。我在网上搜索了一段时间，但没有一个相关的答案可以解决我的问题。我希望有人能告诉我原因。我会非常感激的

这是标记代码。（Vue模板）

此外，以下是生成曲线实际路径的代码：

function _getRingPath (x, y) {
  var len = 300;
  var controlPoints = {
    left: { x: x - len, y: y - len },
    right: { x: x + len, y: y - len },
  };

  return `
    M ${x},${y}
    C ${controlPoints.left.x},${controlPoints.left.y} 
      ${controlPoints.right.x},${controlPoints.right.y}
      ${x},${y}`
}

最后，有一个示例图像显示缺少的标签。

---

除了路径数据的第一个和最后一个顶点之外，标记mid应该在每个顶点上渲染。 正如你们接下来看到的，它出现在它应该出现的地方

路径{笔划：黑色；填充：无}

示例标签

 <path :d='linkArc(edge)' :marker-mid="url(#edge-label-marker-${edge.id})"/>

function _getRingPath (x, y) {
  var len = 300;
  var controlPoints = {
    left: { x: x - len, y: y - len },
    right: { x: x + len, y: y - len },
  };

  return `
    M ${x},${y}
    C ${controlPoints.left.x},${controlPoints.left.y} 
      ${controlPoints.right.x},${controlPoints.right.y}
      ${x},${y}`
}

function _getArcPath (sourceX, sourceY, targetX, targetY) {
  var dx = sourceX - targetX
  var dy = sourceY - targetY
  var dr = Math.sqrt(dx * dx + dy * dy)
  return `
    M ${sourceX}, ${sourceY}
    A ${dr},${dr} 0 0,1 ${targetX},${targetY}`
}