DOM에 추가 한 후 Safari가 업데이트되지 않습니다.

Question

통해 Javascript innerHTML을 통해 새 요소를 추가하고 있습니다. 이 요소는 마스크로 사용되는 원 요소입니다.

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

새로운 요소가 onclick 함수 호출과 함께 추가되었습니다. 일단 이미지의 어딘가를 클릭하면이 새 요소가 만들어지고 적절히 추가됩니다. 크롬에서이 기능을 테스트 할 때 올바른 결과 (새 마스크가 이미지에 적용됨)가 표시됩니다. 그러나 사파리 또는 FF로 실행할 때 제대로 작동하지 않습니다. 모든 브라우저에서 DOM onclick에 추가하고 있습니다. (메신저 로깅이 추가 되었기 때문에 알 수 있습니다.) 그러나 DOM은 Safari 및 FF에서 클릭 한 후 새로 고침하는 것처럼 보이지 않지만 Chrome에서는 그렇지 않습니다.

여기에 큰 것이 누락 되었습니까? 이것은 상황을 정확하게 분석 한 것입니까? 이것에 접근하는 다른 방법이 있습니까? 동적으로 .innerHTML를 통해

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> 요소에 항목 추가는 지원되지 않습니다, only implied by the HTML5 spec 입니다.

<svg> 요소에 동적으로 추가하는 것은 모든 브라우저에서 아직 구현되지 않은 새로운 기능입니다.

동적으로 SVG 항목을 작성/추가 createElementNS를 사용하려면

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