SVG.JS Добавление текстового пути к тексту с использованием существующего пути

Question

Пытаюсь поместить текстовый путь в элемент Text в SVGJS, но я хочу использовать существующий путь вместо SVGJS, создавая дополнительный элемент Path в defs раздел, который я должен обновить.

Причина этого в том, что у меня есть (текстовая) метка, которая появляется в строке, которую можно перетаскивать, и я хотел бы иметь возможность сделать это в собственном SVG, а не обновлять путь к тексту в элемент также.

Так что в настоящее время SVG.JS сделает это

<defs>
  <path id="SvgjsPath0010" d="M0,0L100,100" />
</defs>
....
<g>
  <path id="SvgjsPath1234 d="M0,0L100,100" />
  <text>
    <textPath id="SvgjsTextPath0011" href="#SvgjsPath0010">
      A Label
    </textPath>
  </text>
</g>

Чего я хочу добиться, так это сделать в SVG.JS просто используя path элемент выше как TextPath...

<g>
  <path id="SvgjsPath1234 d="M0,0L100,100" />
  <text>
    <textPath id="SvgjsTextPath0011" href="#SvgjsPath1234">
      A Label
    </textPath>
  </text>
</g>

Я пытался передать объект Path, но не пошел, и документация немного неубедительна. Я уже пробовал это;

var path = mySvgGroup.path('M0,0L100,100');

var line = mySvgGroup.text('A Label');
line.path( path );

Но, похоже, это не нравится.

На данный момент я считаю, что лучше всего создать элемент Text вручную, но предпочел бы более быстрый и понятный вариант.

Какие-либо предложения?

Answer 1

В svg.js v2 нет хорошего способа повторно использовать путь для textPaths. К сожалению, реализация не следует поведению клипа или маски, когда вы просто можете передать свой объект, который хотите использовать повторно.

Эта проблема исправлена ​​в svg.js v3. Мы прилагаем все усилия, чтобы выпустить его в ближайшее время. Однако до тех пор вы можете просто использовать эту фиксированную версию:

SVG.extend(SVG.Text, {
  path: function(d) {
    // create textPath element
    var path  = new SVG.TextPath
    var track

    if (d instanceof SVG.Path) {
      track = d
    } else {
      track = this.doc().defs().path(d)
    }

    // move lines to textpath
    while (this.node.hasChildNodes())
      path.node.appendChild(this.node.firstChild)

    // add textPath element as child node
    this.node.appendChild(path.node)

    // link textPath to path and add content
    path.attr('href', '#' + track, SVG.xlink)

    return this
})

На самом деле исправление настолько крошечное, что мы могли бы перенести его на v2:)

Теперь вы можете просто пройти по Пути