html - Svg 文本 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)。您应该从刚刚关闭的前一个元素开始网络元素。像内联元素。