SVG CSS3 interaction only works in Firefox?

[Scoping]

I’m not sure where I’m going wrong with this.

I’m trying to get some mouseover interaction with my SVG file which is created in Illustrator. I added the groups and id’s manually and did the animating in CSS3 and Less. And I managed to get it to work how I want to in Firefox.

Now in all other browsers (Chrome, IE, Opera) the SVG image is completely static and I have no idea why.

I’m not sure what’s causing it, I hope some fresh eyes can help me out.
Here’s the fiddle

[Paulie_D]

Perhaps it’s a failing of JSFiddle?

Codepen has some interaction: http://codepen.io/Paulie-D/pen/mndIK

[Scoping]

Hey Paulie,

I doubt it’s an error with jsfiddle because my local version didn’t work at all (besides Firefox). Strange that Codepen shows a little bit more.
Surely the entire CSS animation as seen in FF should be possible in Chrome?

[Paulie_D]

No Idea if this is related but could Chrome be borking because you are apply the effects to a sub-id of an Id…if you see what I mean?

#circleLeft:hover #circleLeftText {
  -webkit-transform-origin: 135px 460px 0;
  -moz-transform-origin: 135px 460px 0;
  -ms-transform-origin: 135px 460px 0;
  /* IE 10+ */

  -o-transform-origin: 135px 460px 0;
  transform-origin: 135px 460px 0;
  transform: scale(1.5);
}

[Scoping]

It seems to be unrelated. I’ve tried changing the sub id’s to sub classes. And removing the classes altogether. Still nothing. :-(

[Author]

Posts