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

Добрый день!

Есть главная страница, в ней через тег 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 файлы а потом с ними работать?

В том то и дело что не знаю с чего начать..
Пробовал так..

document.getElementById('svg_right_line').addEventListener('load',function(){

anim_right_line()

}
)

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

.... onload="this.onclick()" ..... объекту
ну или кто там ловит второй онклик?

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

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('education');
var div_bottom_line=parent.document.getElementById('line2_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 были подгружены при загрузки страницы..просто загружены..и все.