I took a big SVG apart and found this weird glitch (fiddle here)
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<text>
<tspan x="0" y="1em" z-index="300">Word1</tspan>
<tspan x="0" dy="1em">Word2</tspan>
</text>
</svg>
With a single line of CSS:
svg { text-transform: uppercase; }
Gives the wrong word wrapping:
WORD1 W
ORD2
Kind of solved my own question but will leave it here in case anyone else finds a problem with tspan word wrapping and CSS and needs to know why - or can explain why this actually happens, answers could be of use.
Please, follow by this link (my example):
And read please documentation:
Please take attention for example 2 (svg.class === example-two). You should start net element from previous element just close. Like inline elements.