Question

使用SVG的新手。我有一个工作演示，在x轴上从左到右有一个线性渐变渐变，但是我试图在y轴上从底部到顶部产生相同的影响。试过几种不同的方法，但不能让它同样工作。

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

HTML

Id

JS - 使用TweenMax更改Rect

上的属性

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

Answer 1

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

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

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

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

SVG LinearGradient - 如何从底部到顶部淡入淡出？

1 个答案: