Question

我有一个指令，它引用一个包含一个简单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）。

有谁知道问题可能是什么？

Answer 1

问题是Angular指令将你的circle元素添加为XHTML（名称空间＆＃34; http://www.w3.org/1999/xhtml＆＃34;）它应该在SVG命名空间中（＆＃34; {{3} }＆＃34;。）

您可以使用正确的命名空间在svg指令的link函数中创建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);
}

或者您可以使用D3库来处理角度指令中的svg元素，如本视频中所述：http://www.w3.org/2000/svg

Angular.js和SVG生成指令

1 个答案: