Как получить доступ к содержимому файла SVG в элементе <img>?

Question

Скажем, у вас есть это в вашем HTML:

<img src='example.svg' />

Как бы вы получили доступ к содержанию (например, <rect>, <circle>, <ellipse> и т. Д.) Файла example.svg через JavaScript?

Answer 1

Невозможно получить DOM ссылочного SVG из элемента img.

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

Вот пример , показывающий, как получить DOM ссылочного svg.

Answer 2

Я почти уверен, что это невозможно.Внешний SVG не является частью DOM, как встроенный SVG, и я не верю, что вы можете получить доступ к дереву SVG DOM из документа загрузки.

То, что вы можете сделать это загрузить SVG как XML, используя AJAX-запрос, и вставить его в DOM в качестве встроенного SVG, который вы можете затем использовать и манипулировать. Этот пример D3 демонстрирует технику.Я думаю, что используемая здесь функция d3.xml() более или менее эквивалентна функции $.ajax() в jQuery с dataType: "xml".

.

Answer 3

Нет, невозможно, но вы можете просто конвертировать <img> в <svg>, как упоминалось ЗДЕСЬ , и вы можете просто получить доступ к узлам в svg в DOM.

Answer 4

Если вы используете встраивание SVG в CSS url(data:...) или просто используете url(*.svg) фон, вы можете встроить их в DOM с помощью svg-embed .

Поддержка Chrome 11+, Safari 5+, FireFox 4+ и IE9 +.