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 - 使用 TweenMax 更改 Rect 上的属性

const tl = new TimelineMax()

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

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

Answer 1

您需要在 linearGradient 元素上指定 x2 和 y2 值，例如

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

默认值为 x2="100%" 和 y2="0%"，它们会产生水平渐变。

我想另一种选择是使用 gradientTransform 来旋转渐变，但考虑到您的用例，我说明的解决方案更简单。