Javascript Angular.js和SVG生成指令

我有一个指令，它引用了一个包含简单SVG圆圈的模板，并将其添加到SVG元素中。输出如下所示：

<svg version="1.1" baseProfile="full" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle r="50" stroke="#000" stroke-width="2" cx="100" cy="100" fill="#0ff" cursor="pointer" booth=""></circle>
</svg>

问题是，圆圈实际上不会在浏览器中渲染；好像我根本没有添加SVG。默认情况下，如果我将相同的HTML放入页面中，圆圈将按预期呈现

我测试过的所有浏览器（Chrome、Firefox、Safari）都会出现这种情况

---

有人知道问题出在哪里吗？

问题是Angular指令将圆圈元素添加为XHTML（名称空间为“”），它应该位于SVG名称空间（“”）上

您可以使用正确的名称空间在svg指令的链接函数中创建cirlce，并将其追加

template: '<svg></svg>',
link:  function(scope, element, attrs) {
    var myCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    angular.element(myCircle).attr('r', 50);
    angular.element(myCircle).attr('cx', 100);
    angular.element(myCircle).attr('cy', 100);
    element.append(myCircle);
}

模板：“”，
链接：函数（范围、元素、属性）{
var myCircle=document.createElements（'http://www.w3.org/2000/svg","圆圈",；
角度元素（myCircle）.attr（'r'，50）；
角度元素（myCircle）.attr（'cx'，100）；
角度元素（myCircle）.attr（'cy'，100）；
元素。追加（myCircle）；
}

---

或者，您可以使用D3库在angular指令中操作svg元素，如本视频中所述：

这是正确的答案。不久前我发现了这个问题，但忘了提出我自己的问题。