ng-bind-html в текстовом теге svg не отображает tspan в Firefox и IE

Question

Я не могу создать SVG с angularjs, когда tspan загружается из атрибута ng-bind-html, Firefox и IE не отображают их.

Мой контроллер выглядит так:

$scope.titlenotok="svg not ok";
var content = '<tspan dy="20" x="0"  xml:space="preserve">line1 not ok</tspan><tspan dy="30" x="0"  xml:space="preserve">line 2 not ok</tspan>'
$scope.notok = $sce.trustAsHtml(content);

Я создаю скрипку, чтобы проиллюстрировать

http://jsfiddle.net/3WNhT/

Для хрома все нормально.

Answer 1

Роберт был прав.

Вот мое решение. Секрет был в том, чтобы использовать createElementNS. так что браузер понимает, что это элемент svg, а не элемент html.

Вот директива

app.directive('multilinesvgtext',  function () {
    var xmlns = "http://www.w3.org/2000/svg";
    var myLink = function (scope, elem, attrs) {

        attrs.$observe('contenu', function (val) {
            var data = val;

            var generateTSpan = function (lineOftext) {
                var tspanElement = document.createElementNS(xmlns, 'tspan');
                tspanElement.setAttribute('x', attrs.x);
                tspanElement.setAttribute('dy', attrs.dy);
                tspanElement.setAttribute('class', attrs.class);
                tspanElement.setAttribute('xml:space', 'preserve');
                var tspanContent = document.createTextNode(lineOftext);
                tspanElement.appendChild(tspanContent);
                return tspanElement;
            };
            // We delete the old children
            while (elem[0].firstChild) {
                elem[0].removeChild(elem[0].firstChild);
            }
            var lines = data.split('\n');
            for(var i= 0; i < lines.length; i++)
            {
                var textContent = lines[i]!=='' ? lines[i] : ' ';
                var newTspanElement = generateTSpan(textContent);
                elem[0].appendChild(newTspanElement);
            }
        });
    };
    return {
        restrict: 'A',
        link: myLink
    };
 }
);

Который может быть использован следующим образом:

Моя директива добавляет дочерние элементы tspan для каждой строки текста в mydata и использует атрибут data-dy в качестве атрибута dy для этого tspan.