Javascript 如何在运行时添加SVG元素-角度

我将通过单击按钮添加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 +' />');


        });
    }
});

myApp.directive（'addRectangle'，function（）{
返回函数（范围、元素、属性）{
元素绑定（'单击'，函数（）{
scope.rectCount++；
元素（document.getElementsByClassName（'svgMain'））.append（“”）；
});
}
});

元素将被正确添加，正如我所期望的，但问题是它没有显示在相关位置！我已经检查了页面的源html，我完全确定这一点。 这是这个问题的关键：

---

此外，我正在使用

angular

version

1.4.x

正如@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

元素。此外，我还更新了。

可能是追加将数据放在了错误的名称空间中，类似于jquery问题@RobertLongson，我向svg和circle元素添加了xmlns=”“属性，但结果没有差异。不会有差异。理想情况下，您需要使用CreateElements，否则innerHtml将在许多（但不是所有）UAs中工作。