Hallo Leute!

Ich habe den großartigen Artikel gelesen"Verwenden von SVG" von Chris Coyer (http://css-tricks.com/using-svg/) und beschlossen, einige Dinge zu verwenden, um ein animiertes Logo zu erstellen. Aber ich habe mich ein bisschen gestritten. Ich erkläre es.

Ich benutze eine.svg Datei für das Logo. Ich ziehe die Datei in eine HTML-Datei mit der<object> Etikett. In der SVG-Datei verwende ichCSS3-Animationen um ein paar tricks mit den objekten in der svg zu machen.

Verwenden der SVG-Datei mit CSS3-Animationen und der<object> Tag funktioniert gut. Aber das Problem beginnt, wenn ich versuche, dies in eine<a> Etikett. Ich benutze einen Trick, der auf den Kommentar von Johan Hernández zum Artikel gerichtet ist (ich kenne den Ursprung des Tricks nicht), undin dieser Geige beispielhaft dargestellt: http://jsfiddle.net/WEbGd/.

Das Problem ist, dass der Link funktioniert, aber nicht die CSS3-Animationen in der SVG. Ich weiß, es liegt an derz-index trick ... aber ich habe noch keinen besseren ansatz dafür gefunden.

Vielleicht hat jemand einen Vorschlag, um diese Arbeit zu machen, oder zumindest für einen anderen Ansatz? Ich habe einen Stift gemacht, um zu verstehen, was ich tue:http://codepen.io/seraphzz/pen/CJrBp.

Hier ist der SVG-Code, den ich zu Testzwecken erstellt habe:

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

Jede Hilfe wäre sehr willkommen!

Vielen Dank!

Bearbeiten:

Nach einigen Recherchen habe ich keine mögliche und saubere Lösung dafür mit nur CSS3 und HTML5 gefunden. Also versuche ich es mit ein bisschen Javascript. Ich habe eine Gabelung des vorherigen Stifts mit etwas Javascript erstellt. Das bekomme ich bis jetzt:http://codepen.io/seraphzz/pen/lxKAw

Ich versuche, mit Javascript auf das innere DOM der SVG zuzugreifen. Ich habe ein Problem beim Zugriff auf den Inhalt mit.contentDocument Unter Chrome wird die Ursache möglicherweise von der Dateiursprungsrichtlinie verursacht (das Chrome-Debug gibt diesen Fehler zurück: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..

Meine Idee hier ist, auf ein Element in der SVG-Datei mit einer ID zuzugreifen und dann mit Javascript die Klasse des Elements mit zu ändern.addClass, zum Beispiel. Die hinzugefügte Klasse befindet sich in der (oben bearbeiteten) .svg-Datei.

Was haltet ihr von diesem Ansatz?