绘制立方贝塞尔曲线路径时，`marker-mid`属性不起作用

Question

我目前正在研究图形绘制程序。在编写代码时，我决定绘制具有三次贝塞尔曲线的环到这些自连接的边，并在连接到其他节点的边上绘制公共的椭圆弧。此外，我将使用marker-mid属性在这些边缘添加标签。但是出现了一个奇怪的现象，标签未显示在自连接边缘（三次贝塞尔曲线路径）上，但可以正确显示在连接到其他节点的边缘（椭圆弧路径）上。 strong>我已经在网上搜索了一段时间，但是没有相对的答案可以解决我的问题。我希望有人能告诉我原因。我会很感激。

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

<marker
  :id="edge-label-marker-${edge.id}" 
  markerWidth='100'
  markerHeight='9'
  viewBox="-10 -20 40 30"
  refX="0"
  refY='10'
  orient='0'
  markerUnits='strokeWidth'>
    <text text-anchor="middle">example label</text>
</marker>

和代码path

 <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}`
}

最后，还有一个示例图像显示丢失的标签。

Answer 1

标记中应该在路径数据的第一个和最后一个顶点以外的每个顶点上呈现。 如您所见，它出现在应该出现的位置。

path{stroke:black; fill:none}

<svg viewBox="0 0 250 200">
<marker
  id="edge-label-marker" 
  markerWidth='100'
  markerHeight='9'
  viewBox="-10 -20 40 30"
  refX="0"
  refY='10'
  orient='0'
  markerUnits='strokeWidth'>
    <text text-anchor="middle">example label</text>
</marker>
<path d="M10,95 C25,15 105,10 125,95 C145,180 225,185 240,95" marker-mid="url(#edge-label-marker)"/>
</svg>