html - Svg 文本 tspan 没有按照它所说的那样做

Question

我拆开了一个大的 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;  }

给出错误的自动换行：

字
1 字 2

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

Answer 1

请点击此链接（我的示例）：

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

请阅读文档：

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

请注意示例 2 (svg.class === example-two)。您应该从刚刚关闭的前一个元素开始网络元素。像内联元素。