У меня есть файл 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" также не делает трюк.
Завершите ход!
Оказывается, вы можете посмотреть эту ссылку: http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html
(Кроме того, пойдите и проголосуйте за некоторые из других ответов Эрика Далстрема, чтобы дать ему несколько моментов за то, что я захватил его ответ!)
Используйте .getSVGDocument(). Кажется, что это работает для <embed>, <object> и <iframe>:
document.getElementById('svgsource').getSVGDocument()
Для <object> или <iframe> вы также можете использовать .contentDocument:
document.getElementById('svgsource').contentDocument
Для IE7 или IE8, я считаю, вам не повезло.
Пробовали ли вы с <object> элемент вместо этого? (атрибут данных вместо src)
Я считаю, что в IE9 вы можете использовать элемент <iframe> для загрузки SVG, и в этом случае вы можете получить доступ к свойству contentDocument, но с предыдущими версиями IE вам может быть не повезло. (Другие браузеры должны использовать contentDocument с <embed> и <object>.)
Краткий ответ: вы можете попробовать вставить ссылки на файлы SVG. Для элементов <object> и <iframe> используйте:
e.parentElement.replaceChild(e.contentDocument.documentElement.cloneNode(true), e);
... где e является ссылочным элементом. Если вам абсолютно нужен элемент <embed>, то измените .contentDocument в приведенном выше коде на .getSVGDocument() (требуются круглые скобки). Обратите внимание, однако, что .getSVGDocument() теперь устарел и поэтому не рекомендуется, но он уже также рекомендуется использовать <object> или <iframe> вместо <embed> в любом случае.
Для получения более полного ответа см. мой другой ответ SO на тему.