Animate rotating SVG element on webpage
Posted
by Zarkonnen
on Stack Overflow
See other posts from Stack Overflow
or by Zarkonnen
Published on 2010-06-08T08:08:09Z
Indexed on
2010/06/08
8:12 UTC
Read the original article
Hit count: 268
So I have an SVG file created in Inkscape embedded in a webpage, and I'd like it to rotate slowly. I've tried using Javascript and inserting animation commands directly into the SVG, but nothing works. I don't want to load in an entire JS library for this one task. This is what I have so far:
<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>
© Stack Overflow or respective owner
