Работа с элементами из встраивания или тега объекта

Question 1

У меня есть графика svg, вставленная на страницу с тегом embed или object:

<object data="graphics.svg" type="image/svg+xml" id="graphics" />

Изображение загружается правильно, и я могу видеть его структуру SVG с помощью отладчика браузера. Я вижу все идентификаторы и атрибуты элементов, но мне кажется, что нет возможности выбрать эти элементы с помощью моих скриптов на странице:

$('#graphics path').length; // 0 (jQuery)
$('path').length; // 0 anyway

Можно ли просматривать графические элементы как обычно?

javascript jquery object svg embed

6

ivkremer 17 Янв 2013 в 14:15

Я не знаю, может ли jQuery делать это сам по себе, но быстрый поиск в Google дал этот плагин, который может помочь: keith-wood.name/svg.html

–

Ashley Sheridan

17 Янв 2013 в 14:29

Answer

Он будет отображаться как отдельный документ, похожий на iframe. Вы можете получить к нему доступ так:

var svg = document.getElementById('graphics').contentDocument

Обратите внимание, что важно дождаться загрузки файла svg; вы можете поместить свой код в обработчик событий onload элемента object, например:

<object data="graphics.svg" type="image/svg+xml" id="graphics" />
<script>
  document.getElementById('graphics').addEventListener('load',function(){
    var svg = document.getElementById('graphics').contentDocument
    // do stuff, call functions, etc.
  })
</script>

10

Eric 11 Мар 2016 в 01:06

Спасибо! Я видел этот фрагмент, когда пытался найти ответ. Теперь я вижу, что это действительно работает, но я не могу проверить, загружен ли объект SVG. Мне нужно добавить что-то вроде $('#graphics').load(function() { /* ... */ }?

–

ivkremer

17 Янв 2013 в 14:49

Да, это должно сработать. Я редактировал с помощью простого примера javascript, но это должно работать для jQuery.

–

marcus erronius

17 Янв 2013 в 14:55

2

Хм ... $('#graphics')[0].addEventListener('load', function(){}) работает, а $('#graphics').load(function(){}) - нет ... Я видел ваш последний фрагмент при поиске решения в Google, но я не пробовал его точно - вот где я допустил ошибку.

–

ivkremer

17 Янв 2013 в 16:41

Можно ли с помощью этого метода нацелить элементы внутри svg (группы, пути)?

–

snow

31 Май 2017 в 13:22

Question 2

Он будет отображаться как отдельный документ, похожий на iframe. Вы можете получить к нему доступ так:

var svg = document.getElementById('graphics').contentDocument

Обратите внимание, что важно дождаться загрузки файла svg; вы можете поместить свой код в обработчик событий onload элемента object, например:

<object data="graphics.svg" type="image/svg+xml" id="graphics" />
<script>
  document.getElementById('graphics').addEventListener('load',function(){
    var svg = document.getElementById('graphics').contentDocument
    // do stuff, call functions, etc.
  })
</script>

10

Eric 11 Мар 2016 в 01:06

Спасибо! Я видел этот фрагмент, когда пытался найти ответ. Теперь я вижу, что это действительно работает, но я не могу проверить, загружен ли объект SVG. Мне нужно добавить что-то вроде $('#graphics').load(function() { /* ... */ }?

–

ivkremer

17 Янв 2013 в 14:49

Да, это должно сработать. Я редактировал с помощью простого примера javascript, но это должно работать для jQuery.

–

marcus erronius

17 Янв 2013 в 14:55

2

Хм ... $('#graphics')[0].addEventListener('load', function(){}) работает, а $('#graphics').load(function(){}) - нет ... Я видел ваш последний фрагмент при поиске решения в Google, но я не пробовал его точно - вот где я допустил ошибку.

–

ivkremer

17 Янв 2013 в 16:41

Можно ли с помощью этого метода нацелить элементы внутри svg (группы, пути)?

–

snow

31 Май 2017 в 13:22

Работа с элементами из встраивания или тега объекта

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript