Return to line TEXT SVG

2

I'm creating a text svg dynamically, and I want to return the middle line of the two variants when I print. I tried the "\ n" and the "br" but it does not 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);
    
asked by anonymous 23.05.2015 / 20:03

1 answer

0

You can break a line by creating another object <text> or by using <tspan> elements by 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 a whole paragraph or block of text without having to move the positions of each line.

See: link

    
12.06.2015 / 14:40