IE9上基于JavaScript的SVG渐变操作

Question

I have an SVG file which specifies a gradient and a circle like below. The embedded script toggles the orientation of the gradient onClick(), which works in all current browsers except IE9. My suspicion is that IE does not redraw the gradient. I tried a few things, such as setting the fill to a solid colour first and thenm reassign the (altered) gradient, to trigger a redraw but no dice so far. My question is, does anybody how I can work around that issue or, even better, solve it. Thanks.

<?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:

Editing the stops help, so that might become workable. Truth is though, my actual file looks more like the following, which is Inkscape svg output, where gradients are split into colour sections and geometry sections and only the geometry is linked to from and object but the colour is reused in multiple other gradients. The approach to swap the stops would effect all objects linking to that color gradient:

<?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

After testing a bit on IE9, it seems that the gradient vector is immutable once defined in IE. Your only choice is to use id'd gradient stops, which are mutable.

<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>