[{"data":1,"prerenderedAt":99},["ShallowReactive",2],{"blog-\u002Fblog\u002Fsvg-animation\u002F":3},{"id":4,"title":5,"abstract":6,"author":7,"body":8,"cover_image":85,"date":86,"description":14,"extension":87,"meta":88,"navigation":89,"path":90,"published":89,"seo":91,"stacker":92,"stem":93,"tags":94,"updated":97,"__hash__":98},"blog\u002Fblog\u002Fsvg-animation.md","SVG bewegt!","Warum die einzelnen Ebenen nicht unkontrolliert herumhüpfen müssen","Livia Kobler",{"type":9,"value":10,"toc":79},"minimark",[11,15,20,35,39,59,65],[12,13,14],"p",{},"Für unsere neue Seite durfte ich mich etwas mit SVG-Bild-Animationen beschäftigen und habe mich anfangs mit sehr eigenwilligen Hüpf-Orgien von Armen und Beinen herumschlagen müssen.\nUnkontrolliert sprangen mir Köpfe, Arme oder Beine vom Körper oder sie drehten sich ohne Halt vom Rest des Körpers weg. ;-)\nBis ich festgestellt habe – das muss nicht sein...",[16,17,19],"h2",{"id":18},"die-schlüssel-zum-erfolg","Die Schlüssel zum Erfolg:",[21,22,23,32],"ol",{},[24,25,26,27,31],"li",{},"die CSS-Property ",[28,29,30],"code",{},"transform-origin",", welche festlegt ab welchem Punkt im SVG gedreht resp. transformiert werden soll",[24,33,34],{},"Die Browser-Konsole, welche hilft die richtige Position und Transformations-Masse zu ermitteln",[16,36,38],{"id":37},"wie-bin-ich-also-vorgegangen","Wie bin ich also vorgegangen?",[40,41,42,45,48],"ul",{},[24,43,44],{},"erstellen eines SVG-Bildes mit verschiedenen Ebenen, welchen ich allen einen Namen gab.",[24,46,47],{},"SVG-Code im Editor überarbeiten, so dass für jede Ebene eine Klasse vergeben ist. (nun ist es möglich diese Klassen im CSS anzusprechen)",[24,49,50,51,54,55,58],{},"im CSS für die Transformation eine zusätzliche Klasse vergeben (Namen egal) und diese mit den Properties ",[28,52,53],{},"transform: z.b. rotate(0deg)"," und ",[28,56,57],{},"transform-origin: 0px 0px"," befüllen",[12,60,61],{},[62,63,64],"strong",{},"zum wichtigsten Part :-)",[40,66,67,70,73,76],{},[24,68,69],{},"wechseln in die Browser-Konsole",[24,71,72],{},"das entsprechende Element suchen",[24,74,75],{},"in der Konsole mit den Pfeiltasten die richtige Position und Drehung ermitteln.",[24,77,78],{},"und diese dann in die Klasse übertragen resp. aus der Klasse flux eine Animation machen",{"title":80,"searchDepth":81,"depth":81,"links":82},"",2,[83,84],{"id":18,"depth":81,"text":19},{"id":37,"depth":81,"text":38},"\u002Fimg\u002Fsvg-anim.webp","2019-08-20","md",{},true,"\u002Fblog\u002Fsvg-animation",{"title":5,"description":14},"livia","blog\u002Fsvg-animation",[95,96],"Frontend","SVG",null,"gmbpmhNB4_H8D0CVFx78ZCX9FMwLNWI7ZoDzAR1pe9M",1787847800435]