IE9でのJavaScriptベースのSVG勾配操作

Question

以下のようなグラデーションとサークルを指定するSVGファイルがあります。埋め込みスクリプトは、IE9を除く現在のすべてのブラウザで機能する、勾配onClick（）の向きを切り替えます。私の疑問は、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> 

EDIT：停止の編集

は役立つので、それが実行可能になるかもしれません。真実ですが、私の実際のファイルは次のようになります。これは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>