.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元素

回答

相关问题