Treehouse: Grow your CSS skills. Land your dream job.

SVG + css3 animation not working with link markup

  • # May 30, 2013 at 3:11 pm

    Hi, Folks!

    I’ve been reading the awesome article “Using SVG” from Chris (, and decided to use some things to make an animated logo. But I’ts been a real fight. I’ll explain.

    I’m using an .svg file for the logo. I’m pulling the file in an html file using the tag. Inside the SVG file, I’m using css3 animations to do some tricks with the objects inside the svg.

    Using the svg file with css3 animations and the tag is working good. But the problem starts when I try to put this inside a link tag. I’m using a trick pointed at the Johan Hernández’ comment on the article (and exemplified in this fiddle: []( “jsFiddle”)). The problem is, with that, the link works, but not the css3 animations inside the SVG. I know it’s because the z-index trick… but I didn’t found yet a better aproach for this.

    Maybe somebody have a suggestion to make this work, or at least for another approach? I made a Pen to help understand what I’m doing: []( “Pen”).

    Any help would be very welcome!


    # May 30, 2013 at 3:12 pm

    Sorry, I forgot to post the svg code: here are below:

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.