New to working with SVG. I have a working demo that has a linear gradient fade from left to right on the x axis, however I'm trying to get the same affect going from bottom to top on the y axis. Tried several different ways but can't get it to work the same.

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=".jpg" / mask="url(#gradient-mask-0)" preserveAspectRatio="xMidYMid slice">
        </svg>
    </li>
</ul>

JS - Using TweenMax to change attribute on Rect

const tl = new TimelineMax()

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

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

New to working with SVG. I have a working demo that has a linear gradient fade from left to right on the x axis, however I'm trying to get the same affect going from bottom to top on the y axis. Tried several different ways but can't get it to work the same.

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./ef71091b57992c63cd6b6371160694b7/tumblr_o9c283SMGZ1st5lhmo1_1280.jpg" / mask="url(#gradient-mask-0)" preserveAspectRatio="xMidYMid slice">
        </svg>
    </li>
</ul>

JS - Using TweenMax to change attribute on Rect

const tl = new TimelineMax()

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

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

• javascript
• svg
• svg-animate
• gsap

1 Answer 1

You'd need to specify x2 and y2 values on the linearGradient element e.g.

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

The default values are x2="100%" and y2="0%" which produce a horizontal gradient.

I guess another option would be to use a gradientTransform to rotate the gradient but the solution I've illustrated is simpler given your use case.