SVG LinearGradient - Wie von unten nach oben verblassen?

Question

Neu mit SVG arbeiten. Ich habe eine funktionierende Demo mit linearem Verlauf von links nach rechts auf der X-Achse, aber ich versuche, den gleichen Effekt von unten nach oben auf der Y-Achse zu bekommen. Ich habe verschiedene Wege versucht, aber ich kann nicht erreichen, dass sie gleich funktionieren.

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 - TweenMax Mit Attribut ändern auf Rect

const tl = new TimelineMax() 

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

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

Answer 1

Sie benötigen würde, um x2 und y2 Werte auf der linearGradient angeben Element z

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

Die Standardwerte sind x2 = "100%" und y2 = "0%", die einen horizontalen Gradienten zu erzeugen.

Ich denke, eine andere Option wäre eine GradientTransform zu verwenden, um den Gradienten zu drehen, aber die Lösung, die ich illustriert habe, ist einfacher in Anbetracht Ihres Anwendungsfalls.