AngularJS creating HTMLElements instead of SVGElements - angularjs

Question

I have two directives, my-svg and my-rect. I want to use them like this:
<svg my-svg>
<my-rect/>
</svg>
my-rect creates an SVG rect and my-svg creates an svg node with the transcluded rectangle inside. In the end, what I want to get is:
<svg width='300' height='300'>
<rect x="140" y="30" width="25" height="25" fill="red"></rect>
</svg>
See example here: http://plnkr.co/edit/UIyUtX?p=preview
As you can see, the red rectangle isn't displayed, even though it exists in the DOM. According to this discussion, it seems that the rectangle isn't displayed because it is an HTMLElement when it should be an SVGElement.
As suggested in that same discussion, I'm using a custom directive compiler to transform the DOM nodes from type HTMLElement to SVGElement, but even that doesn't seem to work in my use-case.
What am I doing wrong?
Thanks

Answer 1

Under the hoods AngularJS uses JQuery or JQLite to create elements from templates to replace with.
JQuery and JQLite both use document.createElement rather than document.createElementNS with the correct SVG namespace.
In your directive you need to take over the creation of SVG elements from AngularJS.
You can inject the following helper function into your directive:
.value('createSVGNode', function(name, element, settings) {
var namespace = 'http://www.w3.org/2000/svg';
var node = document.createElementNS(namespace, name);
for (var attribute in settings) {
var value = settings[attribute];
if (value !== null && !attribute.match(/\$/) && (typeof value !== 'string' || value !== '')) {
node.setAttribute(attribute, value);
}
}
return node;
})
And make use of it in the link function rather than using a template (either external or inline) - something like:
link: function(scope, element, attrs) {
var cx = '{{x}';
var cy = '{{y}}';
var r = '{{r}}';
var circle = createSVGNode('circle', element, attrs);
angular.element(circle).attr('ng-attr-cx', cx);
angular.element(circle).attr('ng-attr-cy', cy);
angular.element(circle).attr('ng-attr-r', r);
element.replaceWith(circle);
$compile(circle)(scope);
}
You can see an example of this working - in a piechart context - over at https://github.com/mjgodfrey83/angular-piechart/.
A fix landed in angular 1.3.0-beta8 to allow non html directive template types to be specified - see here. For an example of it being used check out angular-charts.
Hope that helps.

Answer 2

Putting
<g>
<my-rect></my-rect>
</g>
will display the rectangle.
It doesn't answer the question what are you doing wrong, but it does get the code to display what you want. I spent some time looking at this problem myself but I could not get it to work , and so solved the problem in a different way. What is the problem you are trying to solve using this method?