One path for every letter

[lavolp3]

Currently all letters are combined to one path.

Is it possible to have an option to create one path per letter?
Then it would be possible to animate the text letter by letter.

[lavolp3]

I have build a hack in my project which converts the svg into a multi-path one. Works good but obviously amateurishly coded. I'm a beginner in JS. Maybe it helps somehow

      /*Convert the svg element to one with multiple paths.
      * The string is cut at every M position inside the path element and completed with the html tag of a new path element.
      */
      var svgArray = payload.split("M");
    
      var svgString = svgArray.shift() + "M" + svgArray.shift();   //beginning of path with moveto needs to be retained
      
      svgArray.forEach(function(item) {
        svgString += '\"/><path fill=\"' + self.config.fillColor + '\" stroke=\"' + self.config.strokeColor + '\" d=\"M' + item;  //all other moveto's are replaced by a new path (incl. moveto)
      });

      this.log("Converted payload to "+svgString);

[shrhdk]

Good hack 👍 I do not have something better than your idea.

However, It is more efficient to directly process the raw path data output by opentype.js used by text-to-svg.

Older version of text-to-svg does that.

https://github.com/shrhdk/text-to-svg/blob/2.1.0/src/index.js#L65
https://github.com/shrhdk/text-to-svg/blob/2.1.0/src/index.js#L23-L38

[lavolp3]

closed due to lack of responses