Angular SVG Path directive?

[Dries De Smet]

Bit of a short question, but wondering why this is happening:

In the example posted below, there are two SVG elements, each containing a directive assigned to a element. The first directive doesn't use a template, and is the setup I currently use to assign actions to paths.

The second directive is what I was trying to do in order to clean up my code a bit, but it won't be drawn.

I googled a bit around, and read there is a difference between SVG & DOM nodes? But since both ng-repeat's are working, I'm a bit puzzled on what is going on.

Link to plunkr: http://plnkr.co/edit/cok6O58SOUyaGHG5Jtu5?p=preview

[Sander Elias]

Hoi Dries,

Svg heeft inderdaad een ander type node nodig, dit is in angular ondersteund vanaf versie 1.3.beta-8!

http://plnkr.co/edit/h3CyndYMXBJ9f2SoWMnj?p=preview

Groetjes

Sander

[Christopher Tang]

For those who needed to use the translation bar: it's fixed for > 1.3.beta-8. And to answer your question directly, yes, there is a difference between SVG and HTML nodes in the DOM, as they are defined within different namespaces, although this is more technical than needed to solve the problem. 

The key is the use of the DOM node type = "SVG" as Sander provided in his Plunkr: 

.directive('svgPathReplace', function() {

   return {

      type: 'SVG',

      // snip

   }

If you're interested, you can dig around in the AngularJS source code to understand how DOM nodes are internally created; they are created slightly differently. HTH.

Cheers

Chris

[Sander Elias]

Hi All,

Sorry, had a slip, and posted a dutch message! Luckily Chris stepped up, ad did an excellent translation of it.

As Chris pointed out, and as shown in my dutch message, there is a new (since 1.3.8) type attribute on the DDO (Directive Definition Object),

This new attribute is by default set to 'html', but it can be changed to 'svg' or 'math' . Those setting are case insensitive. 

Regards

Sander

[Robert Grasböck]

This example was really, but what about nesting SVG Elements?

e.g.:

<svg-rect ng-repeat="i in items">

   <svg-circle> <svg-circle>

</svg-rect>

I'm searching since days for a valid example

[Sander Elias]

Hi Robbert,

Can you build a plunk showing your issue? I will have a look at it.

Regards

Sander

[Robert Grasböck]

Hi Sander!

I made a plunk.

Please review it!

Maybe you can help me with that.

[Sander Elias]

Hi Robert,

a couple of things. If you use a template directive to replace an existing node, the containing nodes will get removed. 

so you svg-file directive simply replaces the content. the directives inside will never gets displayed.

svg, can only contain valid svg, if there is a content that is not valid svg, it will not get rendered.

svg-rect, and svg-circle are NOT valid svg. In this case you need to use the replace. However, be aware that replace is deprecated.

I don't have the time now to look for a more permanent solution.

Here you can see: http://plnkr.co/edit/Dw6ac3VHd6otexJe8xBx?p=preview

Regards

Sander

[Robert Grasböck]

Hi again!

I have seen some strange constructs like this:

http://plnkr.co/edit/34PwAbyoP30I7NRJQYaX?p=info

where the inner directives are added while the outer are created.

I found also solutions where the compile service was used to get the inner directives.

But I tried to avoid such code.

For my project I would like to use one svg file (e.g from inkscape) as container.

This SVG should be enriched with icon like elements.

But things always look easier on the paper :)

I created now 2 div tags which lie on top of each other.

Inside the first div tag I put my svg file directive

Insiide the other file I put my icons (like in your example)

It's a little workaround, but it works

Thank you for your time and your help!

regards

Robert