Let label = document. Transform: translate(0, 3px) /* adjust vertical position to centre text */ Add this text element directly after the label background path So I would recommend creating two files: one 'original' file with the text on the path, and another with the text. Sadly, not every SVG renderer supports text on paths, even though they are part of the SVG spec. Give it a class that will determine the text size, colour, etc You need to select the text, and click 'Layer->Convert to Outlines' and then the text gets to be part of the image. Let textElem = document.createElementNS(bgPath.namespaceURI, 'text') Let label1 = document.querySelector('#label1')

And since this SVG is produced by Illustrator, I could also try different export options there in order to get a proper output for my goal. But I could also edit the base SVG file to add a text or any other relevant element and attributes to make this work, as long as I can change the text dynamically from javascript later. My dream would be to use javascript to get the path element and add the text from there. I’ve seen many similar questions here, but most of them involed specifying a x and y property for a text element based on the x and y property the path element. So, is there a way to achieve this? I'm open to different solutions here. I have an SVG exported from Adobe Illustrator with several paths like this, which produces a small polygon I intend to use as a text box I’d like to dynamically add text to it. I gets attached to the path, but the text wraps my path element instead of being inside it.

I've tried to use a textPath element with xlink:href pointing to my path. My path, however, does not have such properties. I've seen many similar questions here, but most of them involed specifying a x and y property for a text element based on the x and y property the path element.

Boxy svg text on path