Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to insert line break in svg <tspan> element?

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?

like image 756
affu Avatar asked Mar 02 '18 06:03

affu


People also ask

How do I create a line break in SVG?

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.

How do you put a break in script tag?

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.

How do I put text inside an SVG path?

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.

What is Tspan SVG?

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.


1 Answers

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:

  • (x & y) - set absolute position
  • (dx & dy) - set relative position

<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>
like image 107
Pavle Avatar answered Oct 24 '22 10:10

Pavle