[英]SVG textPath not attached to the linked path after FabricJS import?
I have the following SVG which works fine on it's own: http://jsfiddle.net/bL3k48jn/1/ 我有以下SVG本身可以正常工作: http : //jsfiddle.net/bL3k48jn/1/
However, when imported with fabric.loadSVGFromString
the text is no long attached to the path, and the font styles are lost. 但是,当使用fabric.loadSVGFromString
导入时,文本不再附加到路径中,并且字体样式也会丢失。
The SVG 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>
You should see a circle with some text following the bottom edge of the curve. 您应该在曲线的底部边缘之后看到一个带有一些文本的圆。
The code I'm using to import the SVG is here: http://jsfiddle.net/hnzgy940/2/ 我用来导入SVG的代码在这里: http : //jsfiddle.net/hnzgy940/2/
The Javascript 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();
});
It appears to be ignoring the xlink:href
attribute, on the <textPath>
element, along with the font styles, which I guess means it might just be ignoring the entire <textPath>
element, but I can't see why. 它似乎忽略了<textPath>
元素上的xlink:href
属性以及字体样式,我想这意味着它可能只是忽略了整个<textPath>
元素,但我不知道为什么。
I had a problem previously where the text wouldn't show at all, but I think this may have been because I didn't have the correct xmlns
attribute. 我以前有一个问题,根本无法显示文本,但是我认为这可能是因为我没有正确的xmlns
属性。
Text Paths are not supported yet in Fabric, but there is a branch: Fabric中尚不支持文本路径,但是有一个分支:
https://github.com/lirmont/fabric.js/tree/Curve-Text https://github.com/lirmont/fabric.js/tree/曲线文本
Also, see the conversation: 另外,请参见对话:
https://github.com/kangax/fabric.js/issues/729 https://github.com/kangax/fabric.js/issues/729
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.