Return to TEXT SVG line

Asked

Viewed 380 times

2

I’m creating a text svg dynamically, and I want to return the middle line of the two variables when printing. I experimented with the " n" and the "br" but it doesn’t make me.

var text_h_fin = document.createElementNS("http://www.w3.org/2000/svg", "text");
text_h_fin.setAttribute('x',10 );
text_h_fin.setAttribute('y', 20);
text_h_fin.setAttribute('fill', '#000');
text_h_fin.setAttribute('font-size', '14px');
text_h_fin.textContent = "1 linha" + "\n" + "2 linha";
svg.appendChild(text_h_fin);
javascript xml svg

  • Can you give a visual example of what you want to do? You want one line under the other?

  • Yes exactly that, but it’s not working for me. Where I print: text_h_fin.textContent = "1 line" + " n" + "2 line";

  • Is this line break always in the same place or dynamic? you’ll have to make different elements for it because there is no line break in the svg text.

  • Ah ok, so I create another element. Thanks @Sergio

1 answer

0

You can break a line by creating another object <text> or using elements <tspan> varying the position (attribute) dy that is relative:

<text x="10" y="20" fill="#000" font-size="14px">
    1 linha
    <tspan dx="18px">2 linha</tspan>
</text>

So you can move an entire paragraph or block of text without having to move the positions of each line.

Behold: http://www.argonavis.com.br/cursos/xml/x500/SVG%2005_Texto.pdf

  • Great answer, there’s only one detail, it’s dx=, but the correct to break the line would be dy=, because the x axis is horizontal and the y is vertical ;) but otherwise this great.

Browser other questions tagged javascript xml svg

You are not signed in. Login or sign up in order to post.