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

给出了错误的文字换行：

WORD1 W
ORD2

我自己解决了这个问题，但是我会把它留在这里，以防其他人在使用tspan文字换行和CSS时遇到问题并需要知道原因，或者可以解释为什么会发生这种情况，答案可能会有用。

- Louis Maddox

---

似乎是Webkit的一个bug，已经在https://code.google.com/p/chromium/issues/detail?id=327606上报告了。在Firefox和Opera（Presto）中运行良好。 - Erik Dahlström

Answer 1

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

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

请阅读文档：

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

请注意第二个例子（svg.class === example-two）。您应该从上一个元素结束后开始下一个元素。就像内联元素一样。

- Andrii Gordiichuk