Скажите, что у вас это в вашем HTML:
<img src='example.svg' />
Как вы можете получить доступ к содержимому (т.е. <rect>, <circle>, <ellipse> и т.д.) example.svg через JavaScript?
Ответ 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.