joeunmellow
New Member
I have a SVG document where three circles are drawn:\[code\]<?xml version="1.0"?><svg width="450" height="80" xmlns="http://www.w3.org/2000/svg"> <script> document.fillCircle = function(id) { var circles = document.getElementsByTagName('circle'), circle = document.getElementById(id); [].forEach.call(circles, function(circle) { circle.setAttribute('fill','#ffffff'); }); circle.setAttribute('fill', '#000000'); } </script> <g> <line y1="35" x1="35" y2="35" x2="375" stroke-width="3" stroke="#000000"/> <circle id="state1" r="30" cy="35" cx="35" stroke-width="3" stroke="#000000" fill="#ffffff" onclick="fillCircle(this.id);"/> <circle id="state2" r="30" cy="35" cx="205" stroke-width="3" stroke="#000000" fill="#ffffff" onclick="fillCircle(this.id);"/> <circle id="state3" r="30" cy="35" cx="375" stroke-width="3" stroke="#000000" fill="#ffffff" onclick="fillCircle(this.id);"/> </g></svg>\[/code\]For testing purposes I have the \[code\]onclick=""\[/code\] method, but actually this document is an object in my html document:\[code\]<object id="test" data="http://stackoverflow.com/questions/12784237/test-vector.svg" width="100px" height="100px"></object>\[/code\]I have a dataset and these three circles show the "progress" of every item. I regularly update the JSON set by pulling the new list from the server. For every item changed, I want to update the filled circle.I would like to update the svg based on some javascript. However, I can't make it to get into the DOM of the SVG. I do not really care if the \[code\]fillCircle()\[/code\] is inside the svg or not and if I have to use \[code\]<embed>\[/code\], \[code\]<object>\[/code\] or something else, but this kind of javascript does not work for me.\[code\]<html><body> <object id="test" data="http://stackoverflow.com/questions/12784237/test-vector.svg"></object> <script> var svg = document.getElementById('test'); console.log(svg); svg.fillCircle('state2'); </script></body></html>\[/code\]I tried several things I found on SO, like this one and this one, but whatever I test, the exception is always:\[code\]Uncaught TypeError: Object #<HTMLObjectElement> has no method 'fillCircle'\[/code\]