Question

所以我试图追加特定元素的innerHtml。每当一个人点击图像的特定区域时，我就会向蒙版元素添加蒙版（收集坐标并根据这些坐标创建蒙版）。基本上我每次用户点击图片时都会添加越来越多的蒙版。我在Chrome中运行得很好，但是，在safari中它将新创建的Circle蒙版渲染为Null。我想这与safari渲染某些html元素以及chrome如何实现有关。我在思考这个问题时是错误的，如果是这样的话，我将如何调整它以使其适用于所有浏览器。

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

            //new mask is added here by appending innerHTML
            document.getElementById("mask1").innerHTML += "<circle id='" + idName +"' r='30' fill='url(#grad1)'/>";
            //This is the object that gets rendered Null in Safari only.
            var circleObject = document.getElementById(idName); 

            circleObject.setAttribute("cx", x);
            circleObject.setAttribute("cy", y);
            alert(document.getElementById("mask1").innerHTML);
} 

<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>
  <rect id="rectMask" x="0" y="0" width="1000" height="835" fill="#FFFFFF"/>
  <circle cx="0" cy="0" r="30" fill="url(#grad1)" />


</mask>
</defs>

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

</svg>

Safari中的setAttribute null

0 个答案: