基於JavaScript的基於IE9的SVG漸變操作

Question

我有一個SVG文件，它指定了一個像下面這樣的漸變和一個圓。嵌入的腳本切換漸變onClick（）的方向，該方法適用於除IE9以外的所有當前瀏覽器。我懷疑是IE不重繪漸變。我嘗試了一些東西，例如先將填充設置爲純色，然後重新分配（更改）漸變，以觸發重繪但目前爲止沒有骰子。我的問題是，是否有人能夠解決這個問題，或者更好地解決問題。謝謝。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="70" width="190"> 
<script type="text/javascript"> 
    <![CDATA[ 
    function flipGrad(evt) { 
     var g=document.getElementById('grad1'); 
     var y1 = g.getAttribute('y1'); 
     var y2 = g.getAttribute('y2'); 
     g.setAttribute('y2', y1); 
     g.setAttribute('y1', y2); 
    } 
    ]]> 
    </script> 
    <defs> 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    </defs> 
    <circle cx="30" cy="30" r="20" stroke="black" stroke-width="2" fill="url(#grad1)" onclick="flipGrad(evt)" /> 
</svg> 

編輯：

編輯停止幫助，因此這可能成爲可行的。事實是，我的實際文件看起來更像以下內容，即Inkscape svg輸出，其中漸變分爲顏色部分和幾何部分，只有幾何體與來自和對象鏈接，但顏色在多個其他漸變中重用。以交換停止方法將實現鏈接到該顏色梯度的所有對象：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="70" width="190"> 
<script type="text/javascript"> 
    <![CDATA[ 
    function flipGrad(evt) { 
     // var g=document.getElementById('gradGeometry'); 
     // var y1 = g.getAttribute('y1'); 
     // var y2 = g.getAttribute('y2'); 
     // g.setAttribute('y2', y1); 
     // g.setAttribute('y1', y2);\ 
     var s1=document.getElementById('stop1'); 
     var s2=document.getElementById('stop2'); 
     var s1s = s1.getAttribute('style'); 
     var s2s = s2.getAttribute('style'); 
     s1.setAttribute('style', s2s); 
     s2.setAttribute('style', s1s); 
    } 
    ]]> 
    </script> 
    <defs> 
    <linearGradient id="gradColour"> 
     <stop id="stop1" offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
     <stop id="stop2" offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    <linearGradient id="gradGeometry1" x1="0%" y1="0%" x2="0%" y2="100%" xlink:href="#gradColour" /> 
    <linearGradient id="gradGeometry2" x1="0%" y1="0%" x2="100%" y2="0%" xlink:href="#gradColour" /> 
    </defs> 
    <circle cx="30" cy="30" r="20" stroke="black" stroke-width="2" fill="url(#gradGeometry1)" onclick="flipGrad(evt)" /> 
    <circle cx="90" cy="30" r="20" stroke="black" stroke-width="2" fill="url(#gradGeometry2)" onclick="flipGrad(evt)" /> 
</svg> 

Answer 1

上IE9測試位之後，它似乎是梯度矢量是不可變的，一旦在IE中定義。你唯一的選擇是使用id'd漸變，這是可變的。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="70" width="190"> 
<script type="text/javascript"> 
    <![CDATA[ 
    function flipGrad(evt) { 
     var s1=document.getElementById('stop1'); 
     var s2=document.getElementById('stop2'); 
     var s1s = s1.getAttribute('style'); 
     var s2s = s2.getAttribute('style'); 
     s1.setAttribute('style', s2s); 
     s2.setAttribute('style', s1s); 
    } 
    ]]> 
    </script> 
    <defs> 
     <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop id="stop1" offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
     <stop id="stop2" offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    </defs> 

    <circle id="bubble" cx="30" cy="30" r="20" stroke="black" stroke-width="2" fill="url(#grad1)" onclick="flipGrad(evt)" /> 
</svg>