0

我正在使用 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>
4

1 回答 1

0

根据实际情况，这可以通过纯 SMIL 动画来解决：

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

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

也可以通过 JavaScript 设置特定的颜色，并且可以通过 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 动画。

于 2013-07-15T21:17:36.060 回答