Svg text tspan并没有按照它所说的那样做

Question

我把一个大的SVG分开，发现了这个奇怪的故障（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>

使用一行CSS：

svg {  text-transform: uppercase;  }

给错了包装词：

WORD1 W
ORD2

有点解决了我自己的问题但是会留在这里以防万一其他人发现tspan自动换行和CSS的问题并且需要知道原因 - 或者可以解释为什么这实际发生，答案可能有用。

Answer 1

请关注此链接（我的示例）：

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

请阅读文档：

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

请注意例2（svg.class === example-two）。你应该从前一个元素开始关闭net元素。像内联元素一样。