Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2014, 16:11
Интересующийся
Отправить личное сообщение для oxxy Посмотреть профиль Найти все сообщения от oxxy
 
Регистрация: 05.12.2013
Сообщений: 20

принудительная загрузка 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 файлы а потом с ними работать?
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2014, 17:44
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

oxxy, где js код?
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2014, 17:52
Интересующийся
Отправить личное сообщение для oxxy Посмотреть профиль Найти все сообщения от oxxy
 
Регистрация: 05.12.2013
Сообщений: 20

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

anim_right_line()

}
)


но тогда при загрузки svg сразу начинает выполнять анимация..а мне надо чтобы анимация была при клике мышкой
Ответить с цитированием
  #4 (permalink)  
Старый 23.07.2014, 18:08
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от oxxy Посмотреть сообщение
Есть функция которая при клике мышкой на определенном диве поочередно запускает анимацию этих svg
Где она?
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2014, 21:18
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

.... onload="this.onclick()" ..... объекту
ну или кто там ловит второй онклик?
Ответить с цитированием
  #6 (permalink)  
Старый 24.07.2014, 12:15
Интересующийся
Отправить личное сообщение для oxxy Посмотреть профиль Найти все сообщения от oxxy
 
Регистрация: 05.12.2013
Сообщений: 20

Сообщение от Rise Посмотреть сообщение
Где она?

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


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 были подгружены при загрузки страницы..просто загружены..и все.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
SVG CSS, SVG to WOFF kobezzza Firefox/Mozilla 2 29.03.2013 15:59
Inline SVG as background Paguo-86PK Элементы интерфейса 0 16.12.2011 20:12
принудительная загрузка страницы radio123 Общие вопросы Javascript 4 27.12.2010 01:12
Простой графический движок: SVG vs Canvas stryaponoff Общие вопросы Javascript 5 29.06.2010 16:59
svg. обработка событий amigo* Элементы интерфейса 0 23.06.2010 22:31