Svg text tspan isn't doing as it's told

问题:

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.

回答1:

Please, follow by this link (my example):

http://jsfiddle.net/s8EG4/2/

And read please documentation:

http://www.w3.org/TR/SVG/text.html#TSpanElement

Please take attention for example 2 (svg.class === example-two). You should start net element from previous element just close. Like inline elements.