Wywołaj funkcję svg javascript wewnątrz funkcji html javascript
Mam dokument SVG, w którym są narysowane trzy koła:
<?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>
Do celów testowych mamonclick="" metoda, ale w rzeczywistości ten dokument jest obiektem w moim dokumencie HTML:
<object id="test" data="test-vector.svg" width="100px" height="100px"></object>
Mam zestaw danych, a te trzy koła pokazują „postęp” każdego przedmiotu. Regularnie aktualizuję zestaw JSON, pobierając nową listę z serwera. Dla każdego zmienionego elementu chcę zaktualizować wypełnione kółko.
Chciałbym zaktualizować svg na podstawie jakiegoś javascript. Jednak nie mogę tego zrobić, aby dostać się do DOM SVG. Nie obchodzi mnie to, czyfillCircle() jest wewnątrz svg lub nie i jeśli muszę użyć<embed>, <object> lub coś innego, ale ten rodzaj javascript nie działa dla mnie.
<html>
<body>
<object id="test" data="test-vector.svg"></object>
<script>
var svg = document.getElementById('test');
console.log(svg);
svg.fillCircle('state2');
</script>
</body>
</html>
Próbowałem kilku rzeczy, które znalazłem na SO, jakten iten, ale cokolwiek testuję, wyjątkiem jest zawsze:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'fillCircle'