SVG textPath не е прикачен към свързания път след импортиране на FabricJS?

Имам следния 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.


person Barry    schedule 08.12.2014    source източник


Отговори (1)


Текстовите пътища все още не се поддържат в Fabric, но има клон:

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

Вижте и разговора:

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

person Josh Pearce    schedule 17.12.2014