Animating inline SVG dynamically via Javascript

Fri, 2010-03-19 18:28 — ashley

That Javascript module got me thinking about making a generic canvas object. For example, check out the following 50x50 grid of 5x5 pixel DIV squares:

(NOTE: If you look at the code for this, don't be shocked by the mess :) I wrote it on my first day of Javascript programming last week.)

Anyway, one might imagine it would be nice to create a canvas of 1x1 pixel DIVs. Unfortunately not. Even with no event mapping it takes forever to load for any reasonably sized grid.

So how else could we obtain a more flexible canvas without resorting to flash?

Well if you haven't guessed by the title of the post, I am talking about using inline SVG.

I need to work out how to embed it in a content node, if that is even possible, since there are some differences in how Firefox handles XML and HTML. But that is for another day. Meanwhile, here is my concept code (which will work in every GUI browser except IE because it's shit):

http://www.ashleymills.com/mymisc/svg.xhtml

Web Development

ashley's blog

Comments

Thu, 2012-01-05 02:50 — Anonymous

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" lang="en">
<head>
	<title>SVG embedded inline in XHTML</title>
	<script type="text/javascript">
<![CDATA[
var n = 0;
function testSVG() {
	n = n + 1;
	var coordx = 55 + (n * 110);
	var picture = document.getElementById('picture');
	var svg = 'http://www.w3.org/2000/svg';	
	var addition = document.createElementNS(svg,'circle');
	addition.setAttributeNS(null,'stroke','green');
	addition.setAttributeNS(null,'stroke-width','3');
	addition.setAttributeNS(null,'fill','gray');
	addition.setAttributeNS(null,'r','50');
	addition.setAttributeNS(null,'cx',coordx);
	addition.setAttributeNS(null,'cy','55');
	var animation = document.createElementNS(svg,'animate');
	animation.setAttributeNS(null,'attributeName','cy'); 
	animation.setAttributeNS(null,'dur','1s');
	animation.setAttributeNS(null,'begin','10s');
	animation.setAttributeNS(null,'from','55');
	animation.setAttributeNS(null,'to','60');
	animation.setAttributeNS(null,'repeatCount','indefinite');
	addition.appendChild(animation);
	picture.appendChild(addition);
	}
]]>
	</script>
</head>
<body>
<h1>SVG embedded inline in XHTML</h1>
<svg:svg id="picture" version="1.1" baseProfile="full" width="1100px" height="110px">
	<svg:circle cx="55" cy="55" r="50" fill="#ff0000" stroke="#000000" stroke-width="1px">
		<svg:animate begin="1s" attributeName="cy" dur="1s" from="55" to="60" repeatCount="indefinite"/>
	</svg:circle>
</svg:svg>
<p><a href="javascript:testSVG();">Test</a></p>
</body>
</html>

New circles appear, but none of them is animated. :(

Thank you in advance and best regards
Max

Wed, 2010-06-30 17:09 — ashley

have you tried a different browser?

Are you using Firefox? Your code works here using Opera.

AFAIK SMIL based animation is not yet supported in Firefox (https://developer.mozilla.org/En/SVG/FAQ#How_does_Mozilla%27s_SVG_implementation_compare_to_Adobe%27s.3f)

P.S. I hadn't bothered to look at SMIL based animation, so thanks for bringing it to my attention. I'm looking forward to it arriving in Firefox now :)

AshleyMills.com

Navigation