问题标签 [tspan]

我试图弄清楚为什么<tspan>在 FF (v31) 和 Safari 中看不到里面的文本（在 Chrome 中它可以工作）。生成文本的代码：

完整代码在这里（jsfiddle）。

没有<tspan>in 在 Chrome 和 FF 中有效，但在 Safari 中无效。

有趣的是：<tspan>来自 MDN 的示例在 FF 中不起作用：https ://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan

我看到<tspan>关于文本装饰的 SVG 元素呈现不一致。

使用这个简单的测试用例：

WebKit (~Safari 8)

火狐 (37)

互联网浏览器 (11)

关于文本装饰的部分似乎没有太多解释。

由于在 'text' 元素上指定了 'text-decoration'，所以 'text' 元素中的所有文本的下划线都使用与 'text' 元素上存在的相同的填充和描边属性（即蓝色填充、红色描边)，即使各种单词具有不同的填充和描边属性值。但是，“不同”一词明确指定了“文本装饰”的值；因此，它的下划线使用填充和描边属性作为围绕单词“不同”的“tspan”元素呈现（即黄色填充，深绿色描边）

对填充/描边有一些说明，但对字体大小没有任何说明。这是否意味着这取决于实施者的决定？这是在其他任何地方定义/解释的吗？

我使用 Ext.draw.Text 为 Ext 图表创建了一个自定义图例面板......在我的应用程序中，图例可能有很长的自定义文本。所以我需要使用固定长度分割它们。一种方法是使用 Javascript 拆分文本并为文本的每个部分创建文本精灵。

有没有其他方法可以在 Ext.draw.Text 中拆分文本？

代码：

提前致谢。

由于某种原因，tspan即使tspan标签关闭，元素的位置也会保持不变。

http://jsfiddle.net/4fzqmeud/1/

两个数字2和3都受tspan定位影响，即使只有2在tspan. 但是，fill属性并非如此。我发现这是一种意想不到的行为。

我知道我可以tspan在y="50". 3但这似乎很麻烦。有没有办法在tspan不添加另一个tspan的情况下“自动”重置位置？

HTML：

与x重叠Test。我不明白为什么会这样。如果我删除该text-anchor属性，它不会发生。

演示：http: //jsfiddle.net/dvt4nv94/2/

我不确定问这个问题的最佳方法。我想将多个 tspan 子元素附加到单个 svg 文本对象。我有以下代码。

当我运行它时，似乎 tspan 元素只附加了一次，而不是 5 次。是否可以重复使用相同的 tspan 变量并将其附加 5 次？

您可以在http://codepen.io/cmgdesignstudios/pen/VePwog?editors=101看到一个示例

我有一个带有两个 tspan 元素的 svg 文本元素。它看起来像这样。

我有一个看起来像这样的第二个空文本元素。

我想将第一个文本元素中的 tspan 元素及其各自的文本复制到第二个文本元素中。

我尝试了以下方法：

这确实复制了 tspan 元素的文本内容并将其放置在另一个容器中，但没有任何 tspan 元素。所以之后它看起来像这样：

如何让第二个文本容器看起来与第一个容器完全一样？

谢谢，--克里斯托弗

尽管阅读了关于 SO 的类似问题，但我似乎无法解决这个问题。我希望我的图例和子图例（因此文本中的两个 tspan）在 x 属性上对齐（所以 Austin 和 Detail 子图例应该从相同的 x 位置开始：

https://jsfiddle.net/fef1xqdt/5/

我读到 tspans 之间的空格把事情搞砸了……我没有。我真的很想了解为什么将 dx="0" 用于两个 tspan 都不起作用。

When using RTL characters in svg chrome seems to freakout. It does not respect the x or y positions in different ways. for x 0 does not seem to be the left of the parent. Also the y position seems to reverse the vertical order of the tspans.

Is this a known bug? Is there any good way to get good RTL support in chrome? I also notice the selection does not select in the correct direction for RTL.

I tested FF 42 and there are some x positioning problems but the vertical order of tspans is correct. Also the selection is in the correct RTL direction.

jsfidle here

我有这个代码：

这向我展示了这一点：¥5,000.00

我想要的是用中国国旗给我看，像这样： 尝试了很多方法，但都做不到。一个是这样的：