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

我正在尝试向已经存在的svg文件添加一个元素，它在chrome和firefox上运行良好。当我尝试使用edge时，它似乎并没有起到任何作用，我所需要的只是让它能够处理三种浏览器的最新版本，但越多越好

这就是它在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>';

var svgObject=document.getElementById（'svg-object'）；
var svgDoc=svgObject.contentDocument；
var tiptext=svgDoc.getElementById（'ToolTipText'）；
设gs=svgDoc.getElementsByTagName（'g'）；
gs[1].innerHTML+=''；

---

再次，我不确定为什么它似乎不工作的边缘，但如果你有任何想法让我知道

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

    <foreignObject id="homeButton" width="20" height="20" x="20" y="20">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=" widdth:30px; height:30px; 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>
      </div>
    </foreignObject>

SVG内容：

<?xml version="1.0" encoding="utf-8" ?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-object" width="800" height="800" onload="loadOnClick()">
    <script type="text/ecmascript">
        <![CDATA[
            function changeRectColor(evt) {
                var red = Math.round(Math.random() * 255);
                var green = Math.round(Math.random() * 255);
                var blue = Math.round(Math.random() * 255);
                evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
            }      
           function loadOnClick() {
               console.log("hello");
               var svgObject = document.getElementById('svg-object');
               var svgDoc = svgObject.contentDocument;   

               let gs = svgObject.getElementsByTagName('g');   
               gs[1].innerHTML += '<foreignObject id="homeButton" width="20" height="20" x="200" y="200"><div xmlns="http://www.w3.org/1999/xhtml"> <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></div></foreignObject>';

           }
        ]]>
    </script>
    <g id="firstGroup">
        <rect id="myBlueRect" width="200" height="150" x="120" y="40" fill="blue" onclick="changeRectColor(evt)" />
        <text x="120" y="40" font-size="13px">Click on rectangle to change it's color.</text>
        <foreignObject id="homeButton" width="20" height="20" x="20" y="20">
          <div xmlns="http://www.w3.org/1999/xhtml">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=" widdth:30px; height:30px; 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>
          </div>
        </foreignObject>
    </g>

    <g id="secondGroup">
        <rect id="myBlueRect" width="200" height="150" x="220" y="220" fill="blue" onclick="changeRectColor(evt)" />
        <text x="220" y="220" font-size="13px">Click on rectangle to change it's color.</text> 
    </g>
</svg>

单击矩形以更改其颜色。
单击矩形以更改其颜色。

结果如下（使用Microsoft Edge 44.18362.1.0版本）：

---

这不是您正在使用的HTML的完整（而是形式）。话虽如此，我还是很惊讶这在任何浏览器中都能起作用：修改

将是一个相当大的安全漏洞，从这个意义上讲，修改

而不使用后期消息将是。。。这么说来：您是否需要将此SVG图像作为静态资产，而不是页面上的普通元素？（考虑到SVG元素在HTML5中被视为一个普通元素）mike，我只是将其放入一个html文件中进行测试，是的，这是所需的一切（除了html的样板文件和javascript的函数括号）。svg是交互式的，与页面中其他svg文件的链接工作svg变得容易多了，现在您可以直接将其放在页面上。谢谢！！最后，我删除了foreignobject标记，并在viewbox中调整了大小（这同样有效）。这是一个更容易的解决办法，对此我表示感谢

<?xml version="1.0" encoding="utf-8" ?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-object" width="800" height="800" onload="loadOnClick()">
    <script type="text/ecmascript">
        <![CDATA[
            function changeRectColor(evt) {
                var red = Math.round(Math.random() * 255);
                var green = Math.round(Math.random() * 255);
                var blue = Math.round(Math.random() * 255);
                evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
            }      
           function loadOnClick() {
               console.log("hello");
               var svgObject = document.getElementById('svg-object');
               var svgDoc = svgObject.contentDocument;   

               let gs = svgObject.getElementsByTagName('g');   
               gs[1].innerHTML += '<foreignObject id="homeButton" width="20" height="20" x="200" y="200"><div xmlns="http://www.w3.org/1999/xhtml"> <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></div></foreignObject>';

           }
        ]]>
    </script>
    <g id="firstGroup">
        <rect id="myBlueRect" width="200" height="150" x="120" y="40" fill="blue" onclick="changeRectColor(evt)" />
        <text x="120" y="40" font-size="13px">Click on rectangle to change it's color.</text>
        <foreignObject id="homeButton" width="20" height="20" x="20" y="20">
          <div xmlns="http://www.w3.org/1999/xhtml">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=" widdth:30px; height:30px; 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>
          </div>
        </foreignObject>
    </g>

    <g id="secondGroup">
        <rect id="myBlueRect" width="200" height="150" x="220" y="220" fill="blue" onclick="changeRectColor(evt)" />
        <text x="220" y="220" font-size="13px">Click on rectangle to change it's color.</text> 
    </g>
</svg>