javascript - 如何在运行时添加 SVG 元素 - Angular

Question

我将通过单击按钮添加一个 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，对此我完全确定。这是这个问题的 fiddle :jsfiddle

此外，我正在使用 angular 版本 1.4.x。

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