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

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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