Forums

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

Home › Forums › CSS › SVG + css3 animation not working with link markup

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 30, 2013 at 3:11 pm #45257
    diegoliv
    Participant

    Hi, Folks!

    I’ve been reading the awesome article “Using SVG” from Chris (https://css-tricks.com/using-svg/), 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: [http://jsfiddle.net/WEbGd/](http://jsfiddle.net/WEbGd/ “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: [http://codepen.io/seraphzz/pen/CJrBp](http://codepen.io/seraphzz/pen/CJrBp “Pen”).

    Any help would be very welcome!

    Thanks!

    May 30, 2013 at 3:12 pm #137096
    diegoliv
    Participant

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



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