javascript - 动态添加的 tspan 在 chrome 中相对于彼此无法正确显示

Question

我正在尝试动态显示 tspan。通常的用例是，只要添加后正确设置 dx/x 和 dy 值，就可以将其添加到行上的任何位置。

这在 Firefox (29) 中运行良好，但在 Chrome (35) 中运行不佳

当从一开始就以正确的顺序添加 tspan 时，它确实有效，但这不是真正的用例，所以我不能指望它

我创建了一个小测试页面。分三种情况: 添加硬编码在 html 中的文本，动态地像真实用例一样并且动态地按顺序。在chrome的开发者工具中，DOM是完全相同的(除非我错过了什么)，但只有第一种和第三种情况显示正确。

这里是 jsfiddle 示例的链接:http://jsfiddle.net/X7t2s/1/

var text = document.getElementById("textDOM");

//in the real use case this is here first
var t2 = document.createElementNS("http://www.w3.org/2000/svg","tspan");
t2.textContent = "i";
t2.setAttributeNS(null,"fill","rgb(0,0,255)"); 
t2.setAttributeNS(null,"dy","12pt"); 
t2.setAttributeNS(null,"x",0);
text.insertBefore(t2,null);

//we then add this as first
var t1 = document.createElementNS("http://www.w3.org/2000/svg","tspan");
t1.textContent = "H";
t1.setAttributeNS(null,"fill","rgb(255,0,0)"); 
t1.setAttributeNS(null,"dy","12pt"); 
t1.setAttributeNS(null,"x",0);
text.insertBefore(t1,t2);

//because t1 has been added we remove x and set dx and set dy
t2.setAttributeNS(null,"dy","0");
t2.removeAttributeNS(null,"x");
t2.setAttributeNS(null,"dx",0); 

我做错了什么吗？ 这是 Chrome 中的一个错误吗？如果是这样，有解决方法吗？ 由于 SVG DOM 显示正确，是否有办法强制它重绘，以便铰链以正确的顺序显示？

提前致谢

Answer 1

是的，您似乎在 Chrome 中遇到了错误。我自己做了一些实验，发现添加和删除 <tspan> s 很不稳定。

您可能应该将此报告为错误。前往Tools->Report an issue或https://code.google.com/p/chromium/issues/list