Имам следния 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="/bg#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="/bg#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();
});
Изглежда, че игнорира атрибута xlink:href
на елемента <textPath>
, заедно със стиловете на шрифта, което предполагам означава, че може просто да игнорира целия елемент <textPath>
, но не виждам защо.
По-рано имах проблем, при който текстът изобщо не се показваше, но мисля, че това може да е, защото нямах правилния атрибут xmlns
.