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

【问题标题】：How to add a SVG element at runtime - Angular如何在运行时添加 SVG 元素 - Angular
【发布时间】：2015-11-10 07:38:49
【问题描述】：

我将通过单击按钮添加 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版本1.4.x。

【问题讨论】：

大概是追加将数据放入错误的命名空间，类似于这个 jquery 问题stackoverflow.com/questions/3642035/…
@RobertLongson 我将 xmlns="w3.org/2000/svg" 属性添加到 svg 和 circle 元素，但结果没有区别。
不会有。您需要理想地使用 createElementNS 或者如果不是 innerHtml 将在许多（但不是所有 UA）中工作。

标签： javascript angularjs svg

【解决方案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。

【讨论】：