[使用javascript和一些跨浏览器支持将内容添加到svg

Question

我正在尝试将元素添加到已经存在的svg文件中，并且在chrome和firefox上运行良好。当我尝试进行边缘处理时，它似乎无能为力，我所需要的只是使它能在三种浏览器的最新版本上工作，但更多的总是更好的。

这是它在html中的声明方式

 <object data="images/svg/MYSVG.svg" type="image/svg+xml" id="svg-object" onload="loadOnClick()"></object>

在loadOnClick调用中，我尝试像这样向其中添加元素

var svgObject = document.getElementById('svg-object');
var svgDoc = svgObject.contentDocument;

var tiptext = svgDoc.getElementById('ToolTipText');

let gs = svgDoc.getElementsByTagName('g');


gs[1].innerHTML += '<foreignObject id="homeButton" width="20" height="20" x="10px" y="10px"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=" fill:#000000;"><a xlink:href="MYOTHERSVG.svg"><path fill="#124A92" d="M7.9,256C7.9,119,119,7.9,256,7.9C393,7.9,504.1,119,504.1,256c0,137-111.1,248.1-248.1,248.1C119,504.1,7.9,393,7.9,256z"></path><path fill="#FFF" d="M408.1,206.8l-150.1-74.9c-1.3-0.6-2.7-0.6-4,0l-150.2,74.9c-1.7,0.8-2.7,2.4-2.7,4.3v29.6c0,1.6,0.8,3.1,2.2,4c1.4,0.9,3.1,1,4.5,0.3l148.2-74l148.1,74c0.6,0.3,1.3,0.5,2,0.5c0.9,0,1.8-0.2,2.5-0.7c1.4-0.9,2.2-2.4,2.2-4V211C410.8,209.2,409.8,207.5,408.1,206.8z"></path><path fill="#FFF" d="M380.5 245.8L256 183.8 131.5 245.8 131.5 360.8 200.5 360.8 200.5 272.6 248 272.6 248 360.8 380.5 360.8z"></path><path fill="#124A92" d="M263.7 272.6H295.7V304.6H263.7z"></path></a></svg></foreignObject>';

再次，我不确定为什么它似乎没有优势，但是如果您有任何想法请告诉我！

Answer 1

尝试在foreignObject元素中添加Div标签，如下所示：