Вызовите функцию jvascript svg внутри функции JavaScript jtascript
У меня есть документ SVG, где нарисованы три круга:
<?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>
Для тестирования у меня естьonclick="" метод, но на самом деле этот документ является объектом в моем HTML-документе:
<object id="test" data="test-vector.svg" width="100px" height="100px"></object>
У меня есть набор данных, и эти три кружка показывают «прогресс» каждого предмета. Я регулярно обновляю набор JSON, вытягивая новый список с сервера. Для каждого измененного элемента я хочу обновить заполненный круг.
Я хотел бы обновить SVG на основе некоторого JavaScript. Однако я не могу попасть в DOM SVG. Мне действительно все равно, еслиfillCircle() находится внутри SVG или нет, и если я должен использовать<embed>, <object> или что-то еще, но этот вид JavaScript не работает для меня.
<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>
Я попробовал несколько вещей, которые я нашел на SO, какэтот а такжеэтот, но что бы я ни тестировал, исключение всегда:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'fillCircle'