Подтвердить что ты не робот

Как добавить элемент SVG во время выполнения - Angular

Я собираюсь добавить элемент SVG, нажав кнопку:

myApp.directive('addRectangle', function() {
    return function(scope, element, attr) {
        element.bind('click',function() {
            scope.rectCount++;
            angular.element(document.getElementsByClassName('svgMain')).append('<circle r=5 cx=200 cy=200 fill=red data-scope='+scope.rectCount +' />');


        });
    }
});

Элемент будет добавлен правильно, как я ожидаю, но проблема в том, что он не отображается в соответствующей позиции! Я проверил исходный html страницы, и я полностью уверен в этом. Это сценарий этого вопроса: jsfiddle

Кроме того, я использую angular version 1.4.x.

4b9b3361

ОТВЕТЫ

Ответ 1

Как сказал @RobertLongson в комментарии к вопросу, вы должны указать пространство имен SVG в каждый раз, когда вы хотите добавить новый элемент SVG, например, этот образец:

function makeSVG(tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs)
                el.setAttribute(k, attrs[k]);
            return el;
        }

Вы можете использовать эту функцию, чтобы добавить новый элемент SVG. Также я обновил fiddle.