Question

尝试在SVGJS中的Text元素上放置文本路径，但是我想使用现有的Path而不是SVGJS在我必须更新的defs部分中创建一个额外的Path元素。

这样做的原因是我有一个（文本）标签出现在一行，可以拖动，我希望能够让本机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：）

现在您只需传递路径

SVG.JS使用现有路径向文本添加文本路径

1 个答案: