Анимация SVG средствами JS

[ioprst]

Привет. Подскажите, пожалуйста, почему данный код может не работать:

var svgDoc;

window.onload = function() {
    svgDoc = document.getElementById("switchid").contentDocument;
}

var switch_ = svgDoc.getElementById("switch");

switch_.onclick = function() {
	current_position = Number(switch_.getAttribute("y"));
	if(current_position == 32) { // off
		switch_.setAttribute("y", "9");
		switch_.setAttribute("style", "fill:#00ff00");
	} else {
		switch_.setAttribute("y", "32");
		switch_.setAttribute("style", "fill:#ff0000");
	}
}

Суть проста. Подключаюсь к svg на странице. И хочу по клику на определенный прямоугольник (id="switch") переводить его из одного положения в другое, ну и цвет меняю. Если все это перенести в функцию события window.onload, то работает, но такой вариант не подходит.

Edited March 19, 2018 by ioprst

[Tilonorrinco]

С кодом в песочнице было бы гораздо проще отследить ошибку.

Навскидку, 

var switch_ = svgDoc.getElementById("switch");

svg лежит внутри iframe?

svgDoc == document ? 

какую ошибку кидает в консоль?

[ioprst]

Решено.

var svgDoc;
var control_switch;
window.onload = function () {
    svgDoc = document.getElementById("switchid").contentDocument;
    initClick();
}
function initClick() {
	control_switch = svgDoc.getElementById("switch");
    control_switch.onclick = function () {
        // func text
    }
}

 

Edited March 20, 2018 by ioprst