.html（）方法相當於SVG元素

-1

我一直在爲SVG元素的.html（）方法尋找一個好的選擇。 .html（）適用於Chrome和Safari，可能是Firefox，但不適用於IE或Edge。.html（）方法相當於SVG元素

下面是我想要實現的。

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);

上有如此相似的問題，但我發現答案是過時的，導致斷開鏈接等

來源

2016-07-15 Stuart Pearman

（我假設你使用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屬性）。

但要加載D3.js的SVG一個更好方法是使用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);

來源

2016-07-15 15:59:02 helderdarocha

.html（）方法相當於SVG元素

回答

相關問題