svg - <tspan> внутри <text> не отображается в FF и Safari

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).

Без <tspan> в работах в Chrome и FF, но не в Safari.

Забавная вещь: <tspan> пример из MDN не работает в FF: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan

Answer 1

Вы не должны использовать 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/

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