The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SVG CSS3 interaction only works in Firefox?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #147364

    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


    Perhaps it’s a failing of JSFiddle?

    Codepen has some interaction:


    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?


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

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.