Search code examples
svgpositiontspan

How to reset SVG tspan positioning without adding an additional tspan

For some reason the positioning of tspan elements is kept even if the tspan tag is closed.

<svg>
    <text x="50" y="50">1<tspan y="55" fill="red">2</tspan>3</text>
</svg>

http://jsfiddle.net/4fzqmeud/1/

Both numbers 2 and 3 are affected by the tspan positioning even though only 2 is inside the tspan. However, not so by the fill attribute. I find this an unexpected behavior.

I know I could use another tspan with y="50" around the 3. But this seems very cumbersome. Is there a way to "automatically" reset the position after the tspan without adding yet another tspan?

Solution

  • How about just specifying multiple y positions in the outer text element. You could also write y="50 50 50" and then set a y="55" in the tspan if you wanted.

    <svg>
    <text x="50" y="50 55 50">1<tspan fill="red">2</tspan>3</text>
</svg>