svg.js позиционирует текст в середине пути

Question

Я пытаюсь использовать svg.js для позиционирования текста на середине пути. Ниже я могу добиться этого через SVG...

<svg width="140" height="140">
<defs>
    <path id="textPlot" d="M68,27 L 51 31 39 39 29 52 26 69 31 86 41 99 55 108 70 111 86 108 99 98 107 85 111 68 106 49 99 39 87 30" fill="#ddd" stroke="#ddd"></path>
</defs>
<text style="font-size: 20px;">
    <textPath xlink:href="#textPlot" startOffset="50%" text-anchor="middle">text align in middle</textPath>
</text>
</svg>

изображение текста на пути

Вот текущий код JavaScript, который я использую, чтобы попытаться достичь вышеуказанного. Но я не знаю ни одного другого атрибута в API svg.js, который бы указывал, что текст должен располагаться на средней базовой линии пути.

SVG('svgNodeId').text('center my text in path')
.attr({id:'myText'})
.font({size:15})
.path('M65,25 L 42 35 28 53 27 77 37 93 52 103 69 108 90 100 104 84z');

Answer 1

Вы можете получить <textPath> ребенок по телефону text.textPath(), Когда у вас есть этот элемент, вы можете установить все атрибуты, которые вы хотите.

SVG('svgNodeId').text('center my text in path')
  .attr({id:'myText'})
  .font({size:15})
  .path('M65,25 L 42 35 28 53 27 77 37 93 52 103 69 108 90 100 104 84z')
  .textPath()
  .attr({startOffset: '50%', 'text-anchor': 'middle'})