Safari添加到DOM後不更新

通過Javascript我正在通過innerHTML添加一個新元素。這個元素是一個被用作掩碼的圓形元素。Safari添加到DOM後不更新

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

新元素添加了onclick函數調用。一旦在圖像上的某處點擊，該函數就會觸發創建這個新元素並適當添加它。當我用chrome測試這個功能時，我得到了正確的結果（新的mask被應用到圖像中）。但是，當我在safari或FF中運行它時，它無法正常工作。它將它添加到所有瀏覽器中的DOM onclick（我知道，因爲即時消息記錄並查看它已被添加）。但是，在Safari和FF中點擊後，DOM看起來並不令人耳目一新，但它在Chrome中確實很棒。

我在這裏錯過了一些大事嗎？這是對情況的正確分析嗎？有另一種方法來解決這個問題嗎？

通過動態HTML .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> 
    <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>

來源

2015-01-06 SMDev

嘗試操縱DOM，而不是直接注入HTML代碼。例子使用'document.createElement'創建你的圓形標籤，然後將它添加到你的掩碼中。 – brso05

這將在從版本36開始的Firefox中起作用。 –

另請參閱http://stackoverflow.com/questions/9723422/is-there-some-innerhtml-replacement-in-svg-xml –

~~添加項目到 <svg>元素 不支持， only implied by the HTML5 spec~~ 。

動態添加到<svg>元素是一個新的功能，尚未在所有瀏覽器中實現。

動態添加/ SVG創建項目，使用createElementNS：

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

來源

2015-01-06 13:41:32 Flynn

規範發生了變化，Safari尚未趕上。 Firefox已經發生了變化，但尚未將其發佈到發行版本。 –

@RobertLongson和所有，我試圖通過操縱DOM創建並添加到 SMDev

這已經在Flynn的答案中涵蓋了，即不使用createElement，使用createElementNS –

Safari添加到DOM後不更新

回答

相關問題