CSS Animation in SVG: Icon um sich selbst drehen

[suntrop]

Hi
Ich habe eine SVG Datei mit zwei Icons. Diese Icons will ich erstens farblich animieren und zweitens um sich selbst drehen lassen.
Aber die Icons springen von ihrer ursprünglichen Position nach links oben in die Ecke. Dort drehen sie sich dann auch.
Aber ich will die Icons an der ursprünglichen Position behalten. Hatte duzende Varianten mit transform origin, initial inherit etc. ausprobiert, aber die kleinen Dinger springen immer ins Eck.

Kennt jemand eine Lösung dazu?

SVG rotate item

 

[Sempervivum]

Das Problem ist, dass Du die Icons mit transform:translate an die gewünschte Position verschoben hast. Bei deiner Animation überschreibst Du dieses transform jedoch wieder. Du musst die selbe Transformation bei der Animation wieder anwenden:

            #atom {
                animation: anicoloratom 2.0s linear infinite 1s;
            }

            #dna {
                animation: anicolordna 2.5s linear infinite 4s;
            }

            @keyframes anicoloratom {
                from {
                    fill: #bbb;
                    transform: translate(181.000000px, 40.000000px) rotate(0deg);
                }

                to {
                    fill: #ddd;
                    /*transform-origin: initial;*/
                    transform: translate(181.000000px, 40.000000px) rotate(359deg);
                }
            }

            @keyframes anicolordna {
                from {
                    fill: #bbb;
                    transform: translate(201.000000px, 191.000000px) rotate(0deg);
                }

                to {
                    fill: #ddd;
                    /*transform-origin: initial;*/
                    transform: translate(201.000000px, 191.000000px) rotate(359deg);
                }
            }

 

[suntrop]

Hi und Danke! Hatte es fast befürchtet. Bisher habe ich nahezu nie mit SVG gearbeitet. Neuland
Die SVG kommt aus Sketch, daher die Position mit Translate. In der Demo hatte ich die Icons auf zwei reduziert, in meiner Datei habe ich aber 12 Stück. Da wird das ganze recht unübersichtlich. Evtl. verzichte ich dann eher auf eine Rotation.
Nochmals Danke, hat mir weitergeholfen!

 

[Sempervivum]

Es gibt auch eine Lösung mit nur einem Satz von Keyframes, aber die erfordert für jedes Icon einen weiteren Container und ich weiß nicht, ob der Aufwand dafür in Sketch geringer ist:

        <style type="text/css">
            #atom .container,
            #dna .container {
                transform-box: fill-box;
                transform-origin: center center;
            }

            #atom .container {
                animation: anicolor 2.0s linear infinite 1s;
            }

            #dna .container {
                animation: anicolor 2.5s linear infinite 4s;
            }

            @keyframes anicolor {
                from {
                    fill: #bbb;
                    transform: rotate(0deg);
                }

                to {
                    fill: #ddd;
                    /*transform-origin: initial;*/
                    transform: rotate(359deg);
                }
            }
        </style>
        <g id="background-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <rect id="background" fill="#F7F7FA" x="0" y="0" width="232" height="232"></rect>
            <g id="atom" transform="translate(181.000000, 40.000000)" fill="#bbbbbb">
                <g class="container">
                    <path d="M9.64444444,0.7876 C7.89777778,0.7876 6.02444444,4.466 6.02444444,9.944 
... usw.

 

[suntrop]

Ja, cool jetzt dreht sich bei mir alles Sorry für die später Rückmeldung, hatte am Laptop kein Sketch.

In Sketch kann man (ähnlich wie in Photoshop) Ebenen erstellen und beim SVG-Export werden die Ebenennamen einfach in <g> umgewandelt. Ich konnte also schnell einfach jedes Icon nochmals in eine Ebene stecken, icon nennen und exportieren.
Zwar macht Sketch daraus dutzende <g id="icon"> aber Suchen & Ersetzen ändert das ja schnell

Danke dir für die Hilfe. Ich muss mich unbedingt mehr mit SVG beschäftigen, sieht interessant aus.

 

[Sempervivum]

Zufällig hatte ich mich vor ein paar Tagen ein wenig mit CSS-Animationen beschäftigt, aber mehr als Spielerei:
3D-Kartenfächer
Interessant wird es, wenn es in die dritte Dimension geht. Wäre vielleicht eine interessante Herausforderung, deine Icons in 3D zu modellieren und zu animieren ;-)

 

[suntrop]

Sieht interessant aus … dir auch n Happy New Year Mal sehen, wohin mich mein SVG Weg – oder sollte ich Path sagen? – bring. Momentan bleibe ich noch auf flacher Ebene.