添加到 DOM 后 Safari 不更新

Question

通过 Javascript 我正在通过 innerHTML 添加一个新元素。此元素是用作遮罩的圆形元素。

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

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

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

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

要动态 add/create svg 项目，请使用 createElementNS:

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

添加到 DOM 后 Safari 不更新

Safari not updating after adding to DOM

javascript

dom

svg

safari