Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.04.2018, 13:29
Аспирант
Отправить личное сообщение для ghost666 Посмотреть профиль Найти все сообщения от ghost666
 
Регистрация: 07.02.2016
Сообщений: 52

получение и использование элементов DOM из SVG
если вставлять весь код svg на страницу в виде <svg></svg>
то проблем с взаимодействием с js нет. но это при большом объеме элементов превращает код в не читаемый поток символов.


как можно взаимодействовать с svg вставленным по типу
<object type="image/svg+xml" data="picture.svg"></object>.
получить dom и управлять им (для анимации).
Ответить с цитированием
  #2 (permalink)  
Старый 24.04.2018, 13:11
Аспирант
Отправить личное сообщение для Luca Посмотреть профиль Найти все сообщения от Luca
 
Регистрация: 20.06.2017
Сообщений: 69

библиотеки использовать не пробовали?
http://dmitrybaranovskiy.github.io/raphael/
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2018, 17:59
Интересующийся
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 24

<object id="your_svg" type="image/svg+xml" data="picture.svg"></object>. - Добавь ID в свой объект

var svg = document.getElementById('your_svg');//получил DOM SVG
var scd = svg.contentDocument;//тут ты получил собственно SVG-DOM теперь можешь взаимодействовать через scd
Ответить с цитированием
  #4 (permalink)  
Старый 15.05.2018, 11:49
Аспирант
Отправить личное сообщение для ghost666 Посмотреть профиль Найти все сообщения от ghost666
 
Регистрация: 07.02.2016
Сообщений: 52

спасибо!
возникла проблема с работой всего этого в хроме.
использовал такой код:
window.onload = function() {

var hud = document.getElementById("hud"),
	svgDochud = hud.getSVGDocument(),
	tween1 = svgDochud.getElementById('tween1'),
	tween2 = svgDochud.getElementById('tween2'),
	tween3 = svgDochud.getElementById('tween3'),
	tween4 = svgDochud.getElementById('tween4'),
	tween5 = svgDochud.getElementById('tween5');

TweenMax.to(tween1 , 200, {rotation:2880, transformOrigin:"50% 50%",repeat:-1});
TweenMax.to(tween2 , 300, {rotation:-720, transformOrigin:"50% 50%",repeat:-1});
TweenMax.to(tween3 , 200, {rotation:1440, transformOrigin:"50% 50%",repeat:-1});
TweenMax.to(tween4 , 400, {rotation:-720, transformOrigin:"50% 50%",repeat:-1});
TweenMax.to(tween5 , 200, {rotation:360, transformOrigin:"50% 50%",repeat:-1});
};


данный код работает во всем кроме хрома.
в хроме работает только если использовать код на сервере. у хрома оказывается запрет на локальную загрузку contentDocument.
может кому понадобится, сам долго мучался. ))
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Трансформация SVG элементов в IE Black_Star (X)HTML/CSS 1 16.07.2017 22:45
Добавление элементов в dom по клику на SVG galiog Events/DOM/Window 2 13.12.2016 03:34
Удаление событий при удалении DOM элементов nextdrift Events/DOM/Window 4 23.11.2015 01:07
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Получение текстового содержимого из всех вложенных DOM EmDmAl Events/DOM/Window 8 02.12.2009 23:38