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 に答える