SVG LinearGradient - 下から上にフェードする方法は？

Question

SVGを使いこなすのが初めてです。私はx軸の左から右に線形勾配フェードを持っている作業デモを持っていますが、私はy軸の下から上へ行く同じ効果を得ることを試みています。いくつかの異なる方法を試しましたが、同じように動作させることはできません。

https://codepen.io/joshuaeelee/pen/bqYmEG

HTML

<div class="share"> 
<ul> 
    <li> 
     <svg class="svg" style="width:100%;height:100%;position:fixed;top:0;bottom:0;left:0;"> 
     <defs> 
      <linearGradient id="gradient-0"> 
      <stop offset="0.8" stop-color="#fff"/> 
      <stop offset="1" stop-color="#000"/> 
      </linearGradient> 
      <mask id="gradient-mask-0" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
      <rect class="js-rect" x="-2" y="0" width="2" height="1" fill="url(#gradient-0)" /> 
      </mask> 
      </defs> 
      <image class="js-images" x="0" y="0" width="100%" height="100%" xlink:href="http://68.media.tumblr.com/ef71091b57992c63cd6b6371160694b7/tumblr_o9c283SMGZ1st5lhmo1_1280.jpg"/mask="url(#gradient-mask-0)" preserveAspectRatio="xMidYMid slice"> 
     </svg> 
    </li> 
</ul> 

JS - あなたはlinearGradient上X2とY2の値を指定する必要があると思いのRect

const tl = new TimelineMax() 

let firstRect = document.querySelector('.js-rect') 

tl.to(firstRect, 5, { 
    attr: { 
     x: 0 
    } 
}) 

Answer 1

上の属性を変更するにはTweenMaxを使用しました要素eg

<linearGradient id="gradient-0" x2="0%" y2="100%"> 

デフォルト値は、x2 = "100％"およびy2 = "0％"で、水平グラデーションが生成されます。

gradientTransformを使用してグラデーションを回転させることもできますが、私が示した解決策は、ユースケースを考えると簡単です。