принудительная загрузка svg

[oxxy]

Добрый день!

Есть главная страница, в ней через тег object подгружаются svg файлы


<div id="i_am" >


<object id='svg_i_am' data="/svgpic/i_am.svg" type="image/svg+xml">
</object>

</div>


<div id="line1_size">

<object id='svg_right_line' data="/svgpic/line.svg" type="image/svg+xml">
</object>


</div>

<div id="line2_size" >
<object id='svg_down_line' data="/svgpic/line_down.svg" type="image/svg+xml">
</object>

</div>

Есть функция которая при клике мышкой на определенном диве поочередно запускает анимацию этих svg.Но возникает проблема ..при первом клике сначало происходит загрузка этих svg в dom и только после это уже на втором клике анимация работает нормально.

Пробовал использовать addEventListener('load',function(){})

НО второй параметр требует указать функцию для выполнения.А мне надо чтобы элементы подгрузились и уже потом при клике мышкой начала выполняться функция .

Как можно загрузить в dom svg файлы а потом с ними работать?

[oxxy]

В том то и дело что не знаю с чего начать..
Пробовал так..
document.getElementById('svg_right_line').addEvent Listener('load',function(){

anim_right_line()

}
)

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

[MallSerg]

.... onload="this.onclick()" ..... объекту
ну или кто там ловит второй онклик?
http://54novosti.ru/uploads/2014/06/e%60kstrasens1-300x225.jpg

[oxxy]

Где она? :blink:


Вот сама функция анимации


function anim_obj_new(to,duration,obj_ids,svg_elem_id,prop, propf){

var to=to;
var duration=duration;


var start=new Date().getTime()

setTimeout(function(){

var now=new Date().getTime()-start;
var progress=now/duration;
var result=Math.floor(to*progress);


var obj_id=parent.document.getElementById(obj_ids);
var obj=obj_id.contentDocument.getElementById(svg_elem _id);

obj.setAttribute('stroke-dasharray',result+' '+ to);


if(result==prop){

propf()

}

if(progress<1){

setTimeout(arguments.callee);

}

},10);

}


Ниже основная функция,которая вызывается в самом файле svg( родитель - <object id='svg_i_am'> --)
__________________________________



function anim_right_line(){


/*Здесь вызывается функция анимации с параметрами*/

anim_obj_new(300,3000,'svg_right_line','line1',300 ,proper)


/*Здесь задаются условия для отображения других элементов svg и дива*/

var obj=parent.document.getElementById('line1_size');

var div_display=parent.document.getElementById('educat ion');
var div_bottom_line=parent.document.getElementById('li ne2_size');


if(obj.style.width<1){

div_display.style.display='none';
div_bottom_line.style.display='none'
}

obj.style.display='block';


/*функция которая указывается в параметре функции anim_obj_new*/
function proper(){


div_display.style.display='block';
if(div_display.style.display=='block'){

div_bottom_line.style.display='block'

/*Здесь также вызывается функция анимации с параметрами для другой линии*/
anim_obj_new(300,3000,'svg_down_line','line2');

}


}



}




а вот собственно сама часть svg где происходит вызов анимации при клике
<svg

xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="300"
height="300"
id="svg2985"


onclick='anim_right_line()'
>


Как я понимаю тут дело не функции(хотя может и ошибаюсь..) Я не знаю как сделать чтобы все svg которые есть в тегах object были подгружены при загрузки страницы..просто загружены..и все.