I have two lines of text each <tspan>
tag for each.
<tspan dy="-11.7890625">welocme</tspan> <tspan dy="16.8" x="285.75">text</tspan>
Need a line break between them. but <br>
is not working.
Can any one help me out here?
Using an absolute x attribute and a relative dy , you can create a line break. The x value is usually set to the same value for each line; it resets the horizontal flow of the text, like a carriage return on an old typewriter.
The newline character is \n in JavaScript and many other languages. All you need to do is add \n character whenever you require a line break to add a new line to a string.
The <textPath> SVG element is used to render the text along with a certain path. To render text along with a certain path, enclose the text in an <textPath> element that has a href attribute with a reference to the <path> element. Attribute: href: The URL to the path or basic shape on which to render the text.
The SVG <tspan> element defines a subtext within a <text> element or another <tspan> element. It allows for adjustment of the style and/or position of that subtext as needed.
I think this is not possible.
You can however use multiple tspan elements inside text element and use em units for dy attribute. Have in mind that there are two possible positioning attributes:
<svg width="200" height="200">
<text x="0" y="0">
<tspan x="0" dy="1em">Hello</tspan>
<tspan x="0" dy="1em">World</tspan>
</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