Svg text tspan не делает, как он сказал

Я взял большой SVG и нашел этот странный сбой (скрипка здесь)

<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>

С одной строкой CSS:

svg {  text-transform: uppercase;  }

Дает неправильную упаковку слов:

WORD1 W
ORD2

Вид моего собственного вопроса, но оставит его здесь, если кто-то найдет проблему с tspan word wrapping и CSS и должен знать, почему - или может объяснить, почему это происходит на самом деле, ответы могут быть полезными.

Ответы

Ответ 1

Пожалуйста, следуйте по этой ссылке (мой пример):

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

И прочитайте, пожалуйста, документацию:

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

Обратите внимание, например, на пример 2 (svg.class=== пример-два). Вы должны начать чистый элемент из предыдущего элемента только близко. Как встроенные элементы.