平滑地更改SVG的填充

Question

I'm using javascript to change the color of a svg. This changes my <linearGradient> filling :

My problem is, that it is changing very rapidly. Is there any way to have a "smooth" flow between the colors? I tried to use the jquery anim() method but it wouldn't work because of the SVG-DOM.

Edit: More source code. In the end, it's pretty simple. I get the stop elements of my svg and calculate a new rgb value. I then set the rgb value as the new stop-color of the stop element

js:

  var gradient = $('#upper').children('stop');
    var firstValue = 'stop-color:rgb('+top[0]+','+top[1]+','+top[2]+')';
    var secondValue = 'stop-color:rgb('+bottom[0]+','+bottom[1]+','+bottom[2]+')';
        gradient[0].setAttribute('style',firstValue);
        gradient[1].setAttribute('style',secondValue);

html

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1"  preserveAspectRatio="none">
<defs>
<linearGradient id="upper" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop style="stop-color:rgb(107,186,112);stop-opacity:1" offset="0"/>
<stop style="stop-color:rgb(107,186,112);stop-opacity:1" offset="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="1" height="1" fill="url(#upper)" opacity="0.6" />
</svg>

Answer 1

Depending on the actual scenario, this could be solved with pure SMIL animation :

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1"  preserveAspectRatio="none">
  <defs>
    <linearGradient id="upper" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop stop-color="rgb(107,186,112)" offset="0">
        <animate attributeType="CSS" attributeName="stop-color" id="animate0"
           dur="2s" begin="rect0.click" fill="freeze" to="rgb(0,255,0)"/>
      </stop>
      <stop stop-color="rgb(107,186,112)" offset="1">
        <animate attributeType="CSS" attributeName="stop-color"
           dur="2s" begin="animate0.begin" fill="freeze" to="rgb(255,0,0)"/>
      </stop>
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="1" height="1" fill="url(#upper)" opacity="0.6" id="rect0"/>
</svg>

I this case the animation is triggered by a click on the rectangle.

Specific colors can also be set by JavaScript and the animation can be triggered by JavaScript :

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1"  preserveAspectRatio="none">
  <defs>
    <linearGradient id="upper" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop stop-color="rgb(107,186,112)" offset="0">
        <animate attributeType="CSS" attributeName="stop-color" id="animate0"
           dur="2s" begin="indefinite" fill="freeze"/>
      </stop>
      <stop stop-color="rgb(107,186,112)" offset="1">
        <animate attributeType="CSS" attributeName="stop-color"
           dur="2s" begin="animate0.begin" fill="freeze"/>
      </stop>
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="1" height="1" fill="url(#upper)" opacity="0.6"/>
  <script type="text/javascript">
    var gradientColors = [[255,0,0],[255,255,0]];
    var animateElements = document.getElementsByTagName("animate");
    for (var i=0; i<2; i++) {
      animateElements[i].setAttribute(
        "to",
        "rgb("+gradientColors[i].join(",")+")"
      );
    }
    animateElements[0].beginElement();
  </script>
</svg>

Whether these solutions are practical for you depends on whether the targeted browsers support SMIL animation.