D3js : How to convert svg text to path?

Question

Is there a D3.js way to convert a text element into a path element?

So when I grasp the generated svg, I could keep my the texts shapes.

Answer 1

There is also a newly added node module called svg-text-to-vector that definitely does so. You simply have to serve the svg file, and it will return it with all the text tags within converted to path.

You may load and save as a File, Base64, Buffer or SVG String.

Example

var options={
load:'file.svg',
save:'file-convert.svg'
}   

const convert = await svgTextPath.getPath(options);

Also supports adding fonts on both runtime and manually. Font names & paths load from svg-text-to-vector/config/fonts.json file

Runtime

• Dynamically add fonts with json key / values {"name", "path"}. Each font needs to be added one time only for all future use.

var font={'name':'Lexend Tera','path': '/lexend_tera.ttf'};

const addFonts = await svgTextPath.push(font);

Manual

• Open svg-text-to-vector/config/fonts.json

{ "font":[ { "name":"Times New Roman", "path":"./public/fonts/times.ttf" } ] }

• Simply add more fonts to json

{ "font":[ { "name":"Times New Roman", "path":"./public/fonts/times.ttf" }, { "name":"Anton", "path":"./public/fonts/anton.ttf" } ] }

Click here for convert to path sample file