css - SVG + css3 animation not working with link markup

Question

Hi folks!

I've been reading the awesome article "Using SVG" from Chris Coyer (http://css-tricks.com/using-svg/), and decided to use some things to make an animated logo. But I'ts been a little fight. I'll explain.

I'm using an .svg file for the logo. I'm pulling the file in an html file using the <object> 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 <object> tag is working good. But the problem starts when I try to put this inside a <a> tag. I'm using a trick pointed at the Johan Hernández' comment on the article (I don't know the origin of the trick), and exemplified in this fiddle: http://jsfiddle.net/WEbGd/.

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.

Here's the svg code that I made for test purposes:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="176.5px" height="63.9px" viewBox="0 0 176.5 63.9" enable-background="new 0 0 176.5 63.9" xml:space="preserve" id="logo-svg">
<style>
    .style3{
        fill:   #9F4400;
    }
    .style4{
        fill:   #9331D3;
    }
    
    #logo-svg, #one{
        -webkit-transform-origin: center center;
           -moz-transform-origin: center center;
             -o-transform-origin: center center;
            -ms-transform-origin: center center;
                transform-origin: center center;
        -webkit-transition: all .2s ease-in-out;
           -moz-transition: all .2s ease-in-out;
             -o-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
                transition: all .2s ease-in-out;
    }
    
    #logo-svg{
        -webkit-transform: scale(0.9);
           -moz-transform: scale(0.9);
             -o-transform: scale(0.9);
            -ms-transform: scale(0.9);
                transform: scale(0.9);
    }
    
    #logo-svg:hover{
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
             -o-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);    
    }
    
    #one{
        -webkit-animation: one .3s ease-in-out;
        -webkit-animation-play-state: paused
        -moz-animation: one .3s ease-in-out;
        -moz-animation-play-state: paused;
        -o-animation: one .3s ease-in-out;
        -o-animation-play-state: paused;
    }
    
    /*.active class added for test purposes*/
    #logo-svg:hover #one, #one.active{
        -webkit-animation-play-state: running;
        -moz-animation-play-state: running;
        -o-animation-play-state: running;
    }
    
    @-webkit-keyframes one{
        0%,50%,100%{-webkit-transform: rotate(0deg);}
        25%,75%{-webkit-transform: rotate(10deg);}
    }
    @-moz-keyframes one{
        0%,50%,100%{-moz-transform: rotate(0deg);}
        25%,75%{-moz-transform: rotate(10deg);}
    }
    @-o-keyframes one{
        0%,50%,100%{-o-transform: rotate(0deg);}
        25%,75%{-o-transform: rotate(10deg);}
    }
    
</style>
<rect id="one" width="63.9" height="63.9" class="style3"/>
<ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
</svg>

Any help would be very welcome!

Thanks!

Edit:

After some research, I didn't found a possible and clean solution for this with only css3 and html5. So I'm giving a shot with a bit of javascript. I've made a fork of the previous pen with some javascript, here's what I'm getting until now: http://codepen.io/seraphzz/pen/lxKAw

What I'm trying to do is access the inner DOM of the SVG with Javascript. I'm having a problem accessing the content with .contentDocument on Chrome, witch may be caused by the file origin policy (the Chrome debug is returning this error: Blocked a frame with origin "http://s.codepen.io" from accessing a frame with origin "http://favolla.com.br". Protocols, domains, and ports must match..

My idea here is access an element inside the SVG file with some id, and then, with javascript, change the class of the element with .addClass, for example. The class added is inside the .svg file (edited above).

What do you guys think about this approach?

Answer 1

This can be done using pure CSS3 and HTML5. The trick is to embed the link inside the svg by using the xlink element with the target set to parent:

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="../index.html" target="_parent">
        <rect id="one" width="63.9" height="63.9" class="style3"/>
        <ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
    </a>
</svg>

The two important bits:

1. The xmlns:xlink="http://www.w3.org/1999/xlink" namespace.

2. The actual link: <a xlink:href="../index.html" target="_parent"> </a>

Note: This method has only been tested using the <object> method of embedding the SVG.