Oi pessoal!

Eu tenho lido o incrível artigo"Usando SVG" de Chris Coyer (http://css-tricks.com/using-svg/), e decidiu usar algumas coisas para fazer um logotipo animado. Mas tem sido uma pequena briga. Eu vou explicar.

Estou usando um.svg arquivo para o logotipo. Eu estou puxando o arquivo em um arquivo html usando o<object> tag. Dentro do arquivo SVG, estou usandoanimações css3 para fazer alguns truques com os objetos dentro do svg.

Usando o arquivo svg com animações css3 e o<object> tag está funcionando bem. Mas o problema começa quando eu tento colocar isso dentro de um<a> tag. Estou usando um truque apontado para o comentário de Johan Hernández sobre o artigo (não sei a origem do truque), eexemplificado neste violino: http://jsfiddle.net/WEbGd/.

O problema é que, com isso, o link funciona, mas não as animações do css3 dentro do SVG. Eu sei que é porque oz-index truque ... mas eu não encontrei ainda uma abordagem melhor para isso.

Talvez alguém tenha uma sugestão para fazer esse trabalho, ou pelo menos para outra abordagem? Eu fiz uma caneta para ajudar a entender o que estou fazendo:http://codepen.io/seraphzz/pen/CJrBp.

Aqui está o código svg que eu fiz para propósitos de teste:

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

Qualquer ajuda seria muito bem vinda!

Obrigado!

Editar:

Após algumas pesquisas, não encontrei uma solução possível e limpa para isso com apenas css3 e html5. Então eu estou dando um tiro com um pouco de javascript. Eu fiz um fork da caneta anterior com algum javascript, aqui está o que estou recebendo até agora:http://codepen.io/seraphzz/pen/lxKAw

O que estou tentando fazer é acessar o DOM interno do SVG com Javascript. Estou com um problema ao acessar o conteúdo com.contentDocument no Chrome, a causa pode ser causada pela política de origem do arquivo (a depuração do Chrome está retornando esse erro: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..

Minha ideia aqui é acessar um elemento dentro do arquivo SVG com algum id, e depois, com javascript, alterar a classe do elemento com.addClass, por exemplo. A classe adicionada está dentro do arquivo .svg (editado acima).

O que vocês acham dessa abordagem?