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（我知道因为我正在记录它并看到它已被添加）。但是，在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>元素是新功能，尚未在所有浏览器中实现。

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

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

添加到DOM后，Safari不会更新

1 个答案: