javascript - SVG LinearGradient-如何从下到上淡入淡出？

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
    }
})

最佳答案

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

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

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

我猜另一种选择是使用gradientTransform旋转渐变，但是根据您的用例，我说明的解决方案更简单。