Animieren rotierenden SVG-element auf der Webseite
So, ich habe eine SVG-Datei erstellt in Inkscape, eingebettet in einer Webseite, und ich möchte es drehen sich langsam. Ich habe versucht, mit Javascript und animation einfügen-Befehle direkt in den SVG, aber nichts funktioniert. Ich will nicht zu laden ist, eine ganze JS-Bibliothek für diese Aufgabe. Dies ist, was ich habe, so weit:
<html>
<body bgcolor="#333333">
<embed src="gear.svg" id="gear" width="1000" height="1000" style="position: absolute; top: -500px; left: -500px;" />
<script type="text/javascript">
var gear = document.getElementById("gear");
window.setInterval(function() {
//Somehow animate the gear.
}, 10);
</script>
</body>
</html>
InformationsquelleAutor Zarkonnen | 2010-06-08
Du musst angemeldet sein, um einen Kommentar abzugeben.
Interessantes Thema, weil AFAIK derzeit Firefox nicht unterstützt animation in SVG.
Also habe ich ein bisschen recherchiert und fand eine funktionierende Lösung. Getestet in Firefox 3.6, IE7 mit Adobe-plug-in, Opera 10.51, Safari 4.0.5, Chrome 5.0.
Den hintergrund der SVG-Bereich hat keine Transparenz im IE7, Safari, und Chrome..., ich könnte versuchen, mit der Objekt tag (nicht unterstützt durch IE, wahrscheinlich müssen einige bedingte HTML...).
[EDIT] OK, habe ich geändert, um den standard Objekt (einbetten haben nie definiert in HTML...) außer für IE, wo es nicht gut unterstützt SVG-plugin von Adobe. Letzteres ermöglicht das hinzufügen eines Attributs zu haben, die Transparenz der einbetten Objekt. Für Webkit-basierte Browser, der keine Transparenz: sehen Objekt eingebettet in HTML: Standard-hintergrund transparent sein soll bug.
Den HTML-code:
Den SVG-code, den ich benutzt (nur die ID ist wichtig, die SVG ist aus Mozilla SVG Projekt):
InformationsquelleAutor PhiLho
<g>
element in Ihrem<svg>
element umschließt, die alles in der<svg>
, und fügen Sie<animateTransform type="rotate" attributeName="transform" values="0 cx cy;360 cx cy" dur="30s"/>
wie ein Kind, dass<g>
element, und ersetzen Sie "cx" und "cy" mit dem, was die tatsächlichen absoluten Punkt, den Sie verwenden möchten, als den Mittelpunkt der Drehung, e.g "100 300". Sollte die Arbeit in der neuesten generation von web-Browsern, abgesehen vom IE9.<g>
element in Ihrem<svg>
element umschließt, die alles in der<svg>
und fügen Sie dann eine<script>
im inneren, dass machtyourGelement.setAttribute("transform", "rotate(" + (newRotation++) + " cx cy)")
aus einerwindow.setInterval
timer, wie zuvor ersetzen Sie die cx-und cy mit Ihrem center of rotation. Diese Lösung sollte weniger als 10 Zeilen code, und sollte funktionieren auch in älteren Implementierungen, die keine Unterstützung für deklarative (SMIL) - Animationen (. e.g IE9, Firefox2, Safari3).Der firefox 3.7 alpha habe ich unterstützt, die zumindest Teile: blog.dholbert.org/2009/10/.... Fühlen Sie sich frei, um es zu testen, sich gegen die w3c-svg-testsuite, dev.w3.org/SVG/profiles/1.1F2/test/harness
InformationsquelleAutor Erik Dahlström