Menu
Is it possible to add text to an svg path, I have created a svg triangle and would like to add a letter to the center of this but not sure if this is possible?
321
To create SVG text that follows a path you use a <textPath> element in combination with a path you define inside <defs> tags. To refer to the path you'll use an xlink:href attribute on the <textPath> . Note: SVG 2.0 is dropping the xlink: and will simply use href to refer to the path.
The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text> , like any other SVG graphics element. If text is included in SVG not inside of a <text> element, it is not rendered.
<svg> with <rect> and <text> elements inside it used to write text inside the rectangle of SVG. To do that, we need to join the<rect> and <text> elements. Refer the topics Draw Rectangle and Draw Text to get the clear understanding of SVG <rect> and <text> elements.
Just the same as you would add a class to an html element, by adding a class attribute. Though to be able to target that with css the svg code must be inserted into the document in-line, it can't be referenced by an <img> tag for example.
Yes. See section 10.13 of the SVG1.1 specification (titled "Text on a path") for information on using the textPath element.
Summarized:
id attribute.<textPath xlink:href="#pathid">My text here</textPath>
Here's an example straight from the spec:
<?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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
