Question

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

这适用于Firefox（29），但不适用于Chrome（35）

当tspans从头开始以正确的顺序添加时它确实有效，但这不是真正的用例，所以我不能依靠它

我创建了一个小测试页面。有三种情况：在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显示正确，有没有办法强制它重绘，以便以正确的顺序显示hings？

提前致谢

Answer 1

是的，看起来你已经在Chrome中遇到了一个错误。我自己做了一些实验，发现添加和删除<tspan>是不稳定的。

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

动态添加的tspans在chrome中相对于彼此不正确显示

1 个答案: