Как получить доступ к содержимому тега "embed" в HTML

У меня есть файл SVG, и я не хочу вставлять его в HTML файл, потому что, ну, он становится беспорядочным. Поэтому после консультаций с w3schools, тег "embed" казался самым безопасным способом включения внешнего файла SVG в HTML.

<embed src="path_to_svg" type="image/svg+xml" id='svgsource' />

Однако мне нужно получить доступ к элементам svg через DOM через javascript в главном html файле. К сожалению, ни

document.getElementById('my_svg_id')

ни

document.getElementById('svgsource').contentDocument

работает в любом браузере. Использование тега "object" также не делает трюк.

Ответ 1

Завершите ход!

Оказывается, вы можете посмотреть эту ссылку: http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html

(Кроме того, пойдите и проголосуйте за некоторые из других ответов Эрика Далстрема, чтобы дать ему несколько моментов за то, что я захватил его ответ!)

Ответ 2

Используйте .getSVGDocument(). Кажется, что это работает для <embed>, <object> и <iframe>:

document.getElementById('svgsource').getSVGDocument()

Для <object> или <iframe> вы также можете использовать .contentDocument:

document.getElementById('svgsource').contentDocument

Для IE7 или IE8, я считаю, вам не повезло.

Ответ 3

Пробовали ли вы с <object> элемент вместо этого? (атрибут данных вместо src)

Ответ 4

Я считаю, что в IE9 вы можете использовать элемент <iframe> для загрузки SVG, и в этом случае вы можете получить доступ к свойству contentDocument, но с предыдущими версиями IE вам может быть не повезло. (Другие браузеры должны использовать contentDocument с <embed> и <object>.)

Ответ 5

Краткий ответ: вы можете попробовать вставить ссылки на файлы SVG. Для элементов <object> и <iframe> используйте:

e.parentElement.replaceChild(e.contentDocument.documentElement.cloneNode(true), e);

... где e является ссылочным элементом. Если вам абсолютно нужен элемент <embed>, то измените .contentDocument в приведенном выше коде на .getSVGDocument() (требуются круглые скобки). Обратите внимание, однако, что .getSVGDocument() теперь устарел и поэтому не рекомендуется, но он уже также рекомендуется использовать <object> или <iframe> вместо <embed> в любом случае.

Для получения более полного ответа см. мой другой ответ SO на тему.