firefox SVG and angular

[Suller Andras]

Hi Guys,

I played with SVG and Angular and found out that something is not
working in firefox (tested only on osx with firefox9.0.1).
The minimal example: http://jsfiddle.net/9qA6d/1/
The error what I see on the firebug console:

Error: setting a property that has only a getter
("ng-attr-widget",0,[object
Array])@http://docs-next.angularjs.org/angular-0.10.6.js:2585
...

My guess is when ng:repeat wants to copy the <g> element, it doesn't
handle that in firefox this node has readonly attributes.

Andras

ps: i hacked together this: https://github.com/sullerandras/SVG-Sequence-Diagram

[Vojta Jína]

Woooooooow. This is awesome, can you publish it on github pages, so that people can directly access it ?

The exception is during setting a css class, because FF does not allow to set css class on svg element - it throws an exception in strict mode.

That means, that if you load jQuery, it's gonna work (jQuery does not run in strict mode, but whole Angular runs in strict mode).

Funny thing is that MDN says you can do that:

https://developer.mozilla.org/en/SVG/Attribute/class

So, I'm not sure, what's the best way how to handle this. Any ideas ?

V.

[Suller Andras]

On Thu, Mar 1, 2012 at 2:32 PM, Vojta Jína <vojta...@gmail.com> wrote:
> Woooooooow. This is awesome, can you publish it on github pages, so that
> people can directly access it ?

Yes, that was my idea as well, here it is:
http://sullerandras.github.com/SVG-Sequence-Diagram/

> The exception is during setting a css class, because FF does not allow to
> set css class on svg element - it throws an exception in strict mode.
> That means, that if you load jQuery, it's gonna work (jQuery does not run in
> strict mode, but whole Angular runs in strict mode).
>
> Funny thing is that MDN says you can do that:
> https://developer.mozilla.org/en/SVG/Attribute/class
>
> So, I'm not sure, what's the best way how to handle this. Any ideas ?

I'm not sure what is running in strict mode. Angular itself?

Andras

[Vojta Jína]

Andreas, thanks for the public link. We think, this diagram app is really cool and you deserve a t-shirt. Can you fill in this form https://docs.google.com/a/google.com/spreadsheet/viewform?formkey=dGlWVFNocm9hWFF0Z3htVUZkNTFqOVE6MQ

Yep, the whole angular code is inside a closure with "strict mode".

V.

[Suller Andras]

Awesome, thank you very much.
Tho I was not doing it for a T-shirt, it was just fun to play with SVG :)

Andras