svg - <text> 中的 <tspan> 在 FF 和 Safari 中不可见答案

【问题标题】：svg - <tspan> inside <text> is not visible in FF and Safarisvg - <text> 中的 <tspan> 在 FF 和 Safari 中不可见
【发布时间】：2014-11-01 03:56:53
【问题描述】：

我试图弄清楚为什么 <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);

完整代码是here (jsfiddle)。

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

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

【问题讨论】：

标签： javascript firefox svg safari tspan

【解决方案1】：

您不应在 SVG 文档中使用 innerHTML。创建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/

【讨论】：

【解决方案2】：

只需使用 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);

Demo here

【讨论】：