svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.04k stars 1.07k forks source link

adding textPath to group makes it disappear #1079

Closed grsjst closed 4 years ago

grsjst commented 4 years ago

Bug report

Fiddle

This fiddle illustrates the problem (note it is SVG.js v3.0.13, but the same happens in v3.0.16: https://jsfiddle.net/xbfejms1/

const draw = SVG('#svg');
var rect = draw.rect(100,100).fill('blue');
var textpath = draw.textPath('Some Text along a path', 'M 100 100 C 200 100 300 0 400 100 C 500 
200 600 300 700 200 C 800 100 900 100 900 100');
var g = draw.group();
g.add(rect);    // ok
g.add(textpath);  // nok 

Explanation

Fuzzyma commented 4 years ago

Thats not a bug. When you create a textpath with the textPath method you are creating a <text> element with a <textPath> element in it. The return value of the method is the textPath. When you move it out of the <text> element, it disappears. You have to move the whole text. You can get it by calling parent().