.html() эквивалент метода для элементов SVG

Question

Я искал хорошую альтернативу для метода .html() для элементов SVG. .html() работает в Chrome и Safari, возможно, в Firefox, но не в IE или Edge.

Ниже приведено то, чего я хочу достичь.

HTML

<svg class="root"> 
    <g> 
    </g> 
</svg> 

JQuery

import image from '/path/to/svg'; 

// image imported from another file, looks like <svg>...</svg> 

g.append('circle') 
    .attr('r', 1) 
    .attr('cx', 0) 
    .attr('cy', 0); 
g.append('g') 
    .html(image); 

Есть подобные вопросы на SO, но ответы, которые я нашел устарели, приводят к неработающие ссылки и т.д.

Answer 1

(Я предполагаю, что вы используете D3.js, так как вы отметили свой вопрос как таковой). В D3.js .html() эквивалентно .innerHTML. Он «работает» в некоторых браузерах, но на самом деле он анализируется как HTML, поэтому на самом деле это взлом. Если вы wan't так или иначе использовать его в браузере, где она не работает и .innerHTML делает, то просто заменить его:

g.node().innerHTML ="<svg><circle cx='50' cy='50' r='30' fill='red'/></svg>"; 

Метод node() возвращает исходный узел DOM (который позволяет вызывать методы DOM и обратитесь к свойствам DOM).

Но лучше способ загрузить SVG в D3.js использует d3.xml():

d3.xml("sample.svg", 
     function(xmlData) { 

    var svg = xmlData.documentElement; 
    console.log(svg); 

    // do something with the imported SVG 
} 

Оттуда вы можете добавить его в <g> с помощью DOM:

g.node().appendChild(svg);