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