FabricJS导入后SVG textPath未附加到链接路径？答案

【问题标题】：SVG textPath not attached to the linked path after FabricJS import?FabricJS导入后SVG textPath未附加到链接路径？
【发布时间】：2015-02-06 03:12:04
【问题描述】：

我有以下 SVG，它自己可以正常工作：http://jsfiddle.net/bL3k48jn/1/

但是，当使用fabric.loadSVGFromString 导入时，文本不再附加到路径，并且字体样式丢失。

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px">

  <path id="textPath" fill="none" stroke-width="5" stroke="yellow"
    d="
    M 250 -250
    m 0, 250
    a -250,250 0 1,0 0,500
    a 250,-250 0 1,0  0,-500
    "
  />

  <text fill="black" font-family = "arial" text-anchor="middle">
    <textPath startOffset="50%" fill="white" stroke="black" stroke-width="2" font-size="36px" font-weight="bold" xlink:href="#textPath">Happy Birthday Dad!</textPath>
  </text>      

</svg>

您应该会在曲线的底部边缘看到一个带有一些文字的圆圈。

我用来导入 SVG 的代码在这里：http://jsfiddle.net/hnzgy940/2/

Javascript

var canvas = new fabric.Canvas('c');

// This is the SVG as a single line
var str = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px"><path id="text_path" d="M 250 -250 m 0,250 a -250,250 0 1,0 0,500 a 250,-250 0 1,0 0,-500"  fill="none" stroke-width="5" stroke="yellow"/><text font-family="arial" text-anchor="middle"><textPath startOffset="50%" fill="white" stroke="black" stroke-width="2" font-size="36px" font-weight="bold" xlink:href="#text_path">Happy Birthday Dad!</textPath></text></svg>';

fabric.loadSVGFromString(str, function(objects, options) {
    svg_text = fabric.util.groupSVGElements(objects, options)

    svg_text.set({
    originX: 'center',
    originY: 'center',
    left: canvas.width / 2,
    top: canvas.height / 2
    });

    svg_text.setCoords();
    canvas.add(svg_text);
    canvas.renderAll();
});

它似乎忽略了 <textPath> 元素上的 xlink:href 属性以及字体样式，我猜这意味着它可能只是忽略了整个 <textPath> 元素，但我不明白为什么.

我之前遇到过一个问题，文本根本不显示，但我认为这可能是因为我没有正确的xmlns 属性。

【问题讨论】：

标签： javascript svg fabricjs

【解决方案1】：

Fabric 中尚不支持文本路径，但有一个分支：

https://github.com/lirmont/fabric.js/tree/Curve-Text

另外，请看对话：

https://github.com/kangax/fabric.js/issues/729

【讨论】：