我将通过单击按钮添加一个 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
。
最佳答案
正如@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 .
关于javascript - 如何在运行时添加 SVG 元素 - Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32054259/