Question

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

我的问题是，它正在迅速变化。有没有办法让颜色之间有“平滑”的流动？我尝试使用jquery anim（）方法但由于SVG-DOM而无法工作。

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

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

根据实际情况，可以解决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动画。

平滑地改变SVG的填充

1 个答案: