SVG and javascript

Forum Moderators: open

Message Too Old, No Replies

SVG and javascript

Inline manipulation...

vincevincevince

1:33 pm on Nov 3, 2007 (gmt 0)

XHTML documents are able to have inline SVG; I've seen it working okay in Firefox. I can navigate the DOM right down inside the SVG elements; but the problem comes when I want to change parts of it... nothing seems to change on the screen.

Does anyone have an example or a tip for me on how I can change attributes of part of an inline SVG?

codedread

2:25 pm on Nov 4, 2007 (gmt 0)

Here is an example

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg:svg viewBox="0 0 100 100">
<svg:circle id="foo" cx="50%" cy="50%" r="15%" fill="blue" />
</svg:svg>
<script type="text/javascript"><![CDATA[
document.getElementById("foo").setAttributeNS(null, "fill", "red");
]]></script>
</body>
</html>

Works in Firefox 2, Opera 9 and should work in Safari 3.

vincevincevince

12:59 am on Nov 5, 2007 (gmt 0)

setAttributeNS... that's what I was doing wrong I guess. I was trying to just change them using element.attribute='newvalue'

Thanks a lot for that. I'm going to have a lot of fun with SVG scripting :) From what I can see, if I can script inline SVG well I should be able to remove Flash from most of my sites for supported browsers.