3

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

var year_elements_text = document.createElementNS(NS, "text");
year_elements_text.setAttribute('x', String((i * year_all_elements_width) + rect_width + (line_width / 2)) + "px");
year_elements_text.setAttribute('y', String(text_starting_point) + 'px');
year_elements_text.setAttribute('style', 'text-anchor: middle');

year_elements_text.innerHTML = '<tspan>' + String(starting_year + i) + '</tspan>';

g_tl.appendChild(year_elements_text);

完整代码在这里（jsfiddle）。

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

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

4

2 回答 2

2

您不应该innerHTML在 SVG 文档中使用。创建tspan并使用textContent设置文本...

    var year_elements_text_tspan = document.createElementNS(NS, "tspan");
    year_elements_text_tspan.textContent = String(starting_year + i);
    year_elements_text.appendChild(year_elements_text_tspan);
    g_tl.appendChild(year_elements_text);

http://jsfiddle.net/e834s5L6/

于 2014-09-08T02:50:11.247 回答
1

只需使用 createElementNS() 和 createTextNode() 来创建 tspan。

    var  tspan = document.createElementNS(NS, "tspan");
    tspan.appendChild( document.createTextNode(String(starting_year + i)) );
    year_elements_text.appendChild(tspan);
    g_tl.appendChild(year_elements_text);

演示在这里

于 2014-09-08T02:54:52.637 回答