Question

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

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

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

Answer 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/

Answer 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

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

2 个答案: