Svg文本tspan没有做，因为它告诉 [英] Svg text tspan isn't doing as it's told

问题描述

我把一个大的SVG分开，发现这个奇怪的故障（这里）

I took a big SVG apart and found this weird glitch (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

WORD1 W
ORD2

解决我自己的问题，但会留在这里，以防任何人发现tspan词包装的问题， CSS，需要知道为什么 - 或者可以解释为什么会发生这种情况，答案可能会有用。

Kind of solved my own question but will leave it here in case anyone else finds a problem with tspan word wrapping and CSS and needs to know why - or can explain why this actually happens, answers could be of use.

推荐答案

此链接（我的示例）：

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

并请阅读文档：

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

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

Please take attention for example 2 (svg.class === example-two). You should start net element from previous element just close. Like inline elements.

这篇关于Svg文本tspan没有做，因为它告诉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！