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

Полный код здесь (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);

Демо здесь