在Angularjs指令包括SVG模板 [英] Including SVG template in Angularjs directive

问题描述

<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
    };
});

但是，这是什么元素结束看起来像在浏览器中。填充两次是不是一个错字。

But this is what the element ends up looking like in the browser. The fill twice is not a typo.

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

下面是一个的jsfiddle http://jsfiddle.net/RG2CF/

Here's a jsfiddle http://jsfiddle.net/RG2CF/

是什么，我试图做不可能的还是我做错了什么？

Is what I'm trying to do not possible or am I doing something wrong?

感谢

编辑：我要补充一点，这个问题可能与事实模板SVG矩形是命名空间，XHTML，而不是SVG做的，但我不能确定我如何可以强制使用或命名空间回SVG，如果实际上是解决方案。

I should add that the issue may have to do with the fact that the template svg rect is namespaced to xhtml instead of svg, but I'm unsure of how I can force this or namespace it back to svg, if that is actually the solution.

推荐答案

有就是你可以设置为 SVG templateNamespace 属性$ C>：

There is a templateNamespace property you can set to svg:

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

下面是一个链接的文档。

这篇关于在Angularjs指令包括SVG模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！