Cześć ludzie!

Czytałem niesamowity artykuł„Korzystanie z SVG” od Chrisa Coyera (http://css-tricks.com/using-svg/) i postanowiłem użyć niektórych rzeczy do stworzenia animowanego logo. Ale była mała walka. Wytłumaczę.

Używam.svg plik logo. Ciągnę plik w pliku html za pomocą<object> etykietka. Wewnątrz pliku SVG używamanimacje css3 zrobić kilka sztuczek z obiektami wewnątrz svg.

Używanie pliku svg z animacjami css3 i<object> tag działa dobrze. Ale problem zaczyna się, gdy próbuję umieścić to w środku<a> etykietka. Używam triku wskazanego na komentarzu Johna Hernándeza do artykułu (nie znam źródła triku), iprzykładem tego skrzypce: http://jsfiddle.net/WEbGd/.

Problem polega na tym, że łącze działa, ale nie animacje css3 wewnątrz SVG. Wiem, że to dlategoz-index sztuczka ... ale nie znalazłem jeszcze lepszego rozwiązania.

Może ktoś ma sugestię, aby ta praca, a przynajmniej inne podejście? Zrobiłem pióro, aby zrozumieć, co robię:http://codepen.io/seraphzz/pen/CJrBp.

Oto kod svg, który zrobiłem dla celów testowych:

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

Jakakolwiek pomoc byłaby bardzo mile widziana!

Dzięki!

Edytować:

Po kilku badaniach nie znalazłem możliwego i czystego rozwiązania dla tego tylko z css3 i html5. Daję więc strzał z odrobiną javascript. Zrobiłem widelec poprzedniego pióra z javascriptem, oto co otrzymuję do tej pory:http://codepen.io/seraphzz/pen/lxKAw

Próbuję uzyskać dostęp do wewnętrznego DOM SVG za pomocą Javascript. Mam problem z dostępem do treści za pomocą.contentDocument w Chrome może być spowodowane zasadą pochodzenia pliku (debugowanie w Chrome zwraca ten błąd: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..

Moim pomysłem jest dostęp do elementu wewnątrz pliku SVG z pewnym identyfikatorem, a następnie, za pomocą javascript, zmień klasę elementu za pomocą.addClass, na przykład. Dodana klasa znajduje się w pliku .svg (edytowanym powyżej).

Co myślicie o tym podejściu?