平滑更改 SVG 的填充答案

【问题标题】：Smoothly change the filling of a SVG平滑更改 SVG 的填充
【发布时间】：2013-07-14 13:53:07
【问题描述】：

我正在使用 javascript 来更改 svg 的颜色。这改变了我的<linearGradient> 填充：

我的问题是，它的变化非常迅速。有什么办法可以让颜色之间“平滑”流动吗？我尝试使用 jquery anim() 方法，但由于 SVG-DOM，它不起作用。

编辑：更多源代码。最后，这很简单。我得到了我的 svg 的停止元素并计算了一个新的 rgb 值。然后我将 rgb 值设置为停止元素的新停止颜色

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>

【问题讨论】：

发布更多代码。您可能可以使用 CSS 过渡
尝试做 2 个单独的 SVG 并通过过渡更改背景
您真的在寻找渐变（例如this）还是简单的彩色动画（例如this）？
@ThomasW，不。我想为一个填充了渐变的 svg 设置动画。
@raam，我对 anim() 方法不满意，我会尝试使用 switchClass()

标签： javascript jquery svg jquery-animate

【解决方案1】：

根据实际情况，这个可以解决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>

在这种情况下，动画是通过单击矩形触发的。

具体颜色也可以是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>

这些解决方案对你是否实用取决于目标浏览器是否支持 SMIL 动画。

【讨论】：