在svg中使用AngularJS指令时，不会显示结果

我正在尝试创建AngularJS指令，我将在svg元素中使用该指令。
该指令不创建svg元素，而是使用exist元素。 我可以在开发工具中看到正确的svg标记，但浏览器没有显示它

这是指令：

angular.module('ui.directives', []).directive('svgText', 
    function() {
      return {
        restrict: 'E',
          replace: true,
          template: '<text fill="green" x="4" y="20" font-weight="bolder" font-size="2" font-family="Arial">89</text>'
      };
    }
  );

angular.module（'ui.directives'，[]）.directive（'svgText'，
函数（）{
返回{
限制：'E'，
替换：正确，
模板：“89”
};
}
);

发生这种情况是因为jQuery（AngularJS在引擎盖下使用）不知道如何创建svg元素。您可以通过向克隆已创建但在SVG命名空间中创建的元素的指令添加链接函数来解决此问题

一种可能更好的方法是将模板包装在SVG元素（定义了名称空间）中，然后在link函数中拉出子元素并使用它，它将已经在正确的名称空间中创建

module.directive(
    'svgText',
    function () {
        return {
            restrict: 'E',
            template: '<svg xmlns="http://www.w3.org/2000/svg"><text fill="green" x="4" y="20" font-weight="bolder" font-size="2" font-family="Arial">89</text></svg>',
            replace: true,

            link: function (scope, elem, attrs) {
                // Extract the child element to replace the SVG element.
                var child = angular.element(elem[0].firstElementChild);

                // Copy attributes into element.
                for (attrName in attrs) {
                    if(typeof attrs[attrName] === "string") {
                        child.attr(attrName, attrs[attrName]);
                    }
                }
                elem.replaceWith(child );
            }
        };
    }
);

module.directive(
“svgText”，
函数（）{
返回{
限制：'E'，
模板：“89”，
替换：正确，
链接：功能（范围、要素、属性）{
//提取子元素以替换SVG元素。
var child=angular.element（元素[0].firstElementChild）；
//将属性复制到元素中。
for（attrs中的attrName）{
if（属性类型[attrName]=“字符串”）{
attr（attrName，attrs[attrName]）；
}
}
元素替换为（子元素）；
}
};
}
);

我已经发表了一篇关于AngularJS+SVG的文章，讨论了许多这样的问题

---

可能是重复的，非常感谢，为了我的生命，我无法理解这个问题。这实际上应该在AngularJS文档中提到。注意：这也适用于引用常规svg文件的

模板URL:

。svg文件也可以包含角度指令，甚至包括ng TRANCLUDE。干得好！