Атрибут `marker-mid` не работает при рисовании кубического пути Безье

Question

Я сейчас работаю над программой для рисования графиков. Когда я писал коды, я решил нарисовать кольца с кубической траекторией Безье к этим самосвязанным ребрам и нарисовал обычные эллиптические дуги на ребрах, соединенных с другими узлами. Кроме того, я собирался добавить метки к этим краям, используя атрибут marker-mid. Но появилось что-то странное, что метка не отображалась на самосоединенном ребре (путь кривой кубического Безье), но она могла правильно отображаться на ребре, соединенном с другими узлами (путь дуги эллипса). Некоторое время я искал в Интернете, но ни один из относительных ответов не может решить мою проблему. Я надеюсь, что кто-то может сказать мне причину. Я буду очень признателен.

Вот код маркера. (Шаблон 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>