javascript - 在 Angularjs 指令中包含 SVG 模板

Question

<div ng-app="testrectApp">
<svg>
    <rect height="10" width="10" style="fill: #00ff00" />
    <testrect />
</svg>
</div>

这是我的指令

module.directive('testrect', function() {
    return {
        restrict: 'E',
        template: '<rect top="20" left="20" height="10" width="10" style="fill: #ff00ff" />',
        replace: true
    };
});

但这就是元素在浏览器中最终的样子。填写两次不是拼写错误。

<rect top="20" left="20" height="10" width="10" style="fill: #ff00ff;fill: #ff00ff"></rect>

这是一个 jsfiddle http://jsfiddle.net/RG2CF/

我想要做的事情是不可能的还是我做错了什么？

谢谢

编辑:我应该补充一点，这个问题可能与模板 svg rect 的命名空间为 xhtml 而不是 svg 有关，但我不确定如何强制它或命名空间回到 svg，如果这实际上是解决方案。

Answer 1

有一个 templateNamespace 属性可以设置为 svg:

module.directive('testrect', function() {
    return {
        restrict: 'E',
        templateNamespace: 'svg',
        template: '<rect .../>',
        replace: true
    };
});

这是一个link到文档。