javascript - 添加到 DOM 后 Safari 不更新

Question

通过Javascript，我通过innerHTML 添加一个新元素。该元素是一个用作 mask 的圆形元素。

document.getElementById("maskG").innerHTML += "<circle id='" + idName +"' cx='" + x + "' cy='" + y + "' r='30' fill='url(#grad1)'/>";

新元素是通过 onclick 函数调用添加的。一旦单击图像上的某个位置，该函数就会触发创建这个新元素并适本地添加它。当我在 Chrome 中测试此功能时，我得到了正确的结果(新蒙版应用于图像)。但是，当我在 safari 或 FF 中运行它时，它无法正常工作。它将它添加到所有浏览器中的 DOM onclick 中(我知道，因为我正在记录它并看到它已被添加)。不过在 Safari 和 FF 中点击后 DOM 似乎没有刷新，但在 Chrome 中却是这样。

我在这里错过了一些大事吗？这是对形势的正确分析吗？还有其他方法可以解决这个问题吗？

html

<svg width="1000" height="835">

<defs>
<mask id="mask1" x="0" y="0" width="1000" height="835" >
  <defs>
            <filter id="f1" x="0" y="0">
              <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="50%" style="stop-color:rgb(0,0,0); stop-opacity:2" />
              <stop offset="75%" style="stop-color:rgb(0,0,0); stop-opacity:1" />
              <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
            </radialGradient>
        </defs>
  <g id="maskG">
  <rect id="rectMask" x="0" y="0" width="1000" height="835" fill="#FFFFFF"/>
  <circle cx="0" cy="0" r="30" fill="url(#grad1)" />

  </g>

</mask>
</defs>

<image onclick="addMask(event)" id="imageID" width="1000" height="835" xlink:href="RiftMapDarkSmall.png"  />

</svg>



</body>

脚本

<script type="text/javascript">

function addMask(event) {
            var x = event.clientX;
            var y = event.clientY;
            idName = "xCord" + x + "yCord" + y;


            //document.getElementById("maskG").innerHTML += "<circle id='" + idName +"' cx='" + x + "' cy='" + y + "' r='30' fill='url(#grad1)'/>";

            var newMask = document.createElement('circle');
            newMask.setAttribute('cx', x);
            newMask.setAttribute('cy', y);
            newMask.setAttribute('r', 30);
            newMask.setAttribute('fill', 'black');
            newMask.setAttribute('id', idName);
            document.getElementById('maskG').appendChild(newMask);




            alert(document.getElementById("maskG").innerHTML);




}



</script>

Answer 1

将项目添加到 <svg>通过 .innerHTML 动态元素 不支持， only implied by the HTML5 spec 。

动态添加到 <svg> elements 是一项新功能，尚未在所有浏览器中实现。

要动态添加/创建 svg 项目，请使用 createElementNS :

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");