All geek questions in one place

Is it possible to add text to the SVG path?

Is it possible to add text to the svg path, I created the svg triangle and would like to add a letter to the center of this, but not sure if this is possible?

+4
source share
1 answer

Yes. See section 10.13 of the SVG1.1 specification (under the heading “Text along the path”) for information on using textPath .

Summarized:

  • Give your path the id attribute.
  • Create <textPath xlink:href="#pathid">My text here</textPath>

Here is an example directly from the specification:
http://www.w3.org/TR/SVG/images/text/toap01.svg

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc>Example toap01 - simple text on a path</desc> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath xlink:href="#MyPath"> We go up, then we go down, then up again </textPath> </text> </svg>
+10
source

Source: https://habr.com/ru/post/989864/

More articles:


All Articles