¡Hola amigos!

He estado leyendo el artículo impresionante"Usando SVG" de Chris Coyer (http://css-tricks.com/using-svg/), y decidí usar algunas cosas para hacer un logotipo animado. Pero he sido una pequeña pelea. Lo explicaré.

Estoy usando un.svg archivo para el logotipo. Estoy tirando el archivo en un archivo html usando el<object> etiqueta. Dentro del archivo SVG, estoy usandoanimaciones css3 para hacer algunos trucos con los objetos dentro del svg.

Usando el archivo svg con animaciones css3 y el<object> La etiqueta está funcionando bien. Pero el problema comienza cuando trato de poner esto dentro de un<a> etiqueta. Estoy usando un truco que apunta al comentario de Johan Hernández sobre el artículo (no sé el origen del truco), yejemplificado en este violín: http://jsfiddle.net/WEbGd/.

El problema es que, con eso, el enlace funciona, pero no las animaciones css3 dentro del SVG. Sé que es porque elz-index truco ... pero no encontré todavía un mejor enfoque para esto.

Tal vez alguien tenga una sugerencia para hacer que esto funcione, o al menos para otro enfoque? Hice una pluma para ayudar a entender lo que estoy haciendo:http://codepen.io/seraphzz/pen/CJrBp.

Aquí está el código svg que hice para propósitos de prueba:

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

Cualquier ayuda sería muy bienvenida!

¡Gracias!

Editar:

Después de algunas investigaciones, no encontré una solución posible y limpia para esto solo con css3 y html5. Así que estoy dando una oportunidad con un poco de javascript. He hecho una bifurcación de la pluma anterior con algunos javascript, esto es lo que estoy obteniendo hasta ahora:http://codepen.io/seraphzz/pen/lxKAw

Lo que estoy tratando de hacer es acceder al DOM interno de SVG con Javascript. Estoy teniendo problemas para acceder al contenido con.contentDocument en Chrome, la política de origen del archivo puede provocarlo (la depuración de Chrome está devolviendo este 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..

Mi idea aquí es acceder a un elemento dentro del archivo SVG con algún id, y luego, con javascript, cambiar la clase del elemento con.addClass, por ejemplo. La clase agregada está dentro del archivo .svg (editado arriba).

¿Qué piensan ustedes acerca de este enfoque?