老师,遮罩只能弄成白色么?怎么才能渐变呢?

老师,遮罩只能弄成白色么?怎么才能渐变呢?

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">

    <defs>

        <linearGradient id="Gradient" >

            <stop offset="0" stop-color="red" stop-opacity="0" />

            <stop offset="1" stop-color="yellow"  stop-opacity="1" />

        </linearGradient>

<mask id="mask">

<rect x="0" y="0" width="200" height="100" fill="url(#Gradient)" />

</mask>

    </defs>

    <circle cx="100" cy="100" r="100"  mask="url(#mask)" />

</svg>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2018-09-29 09:45:29

遮罩是没有颜色的,但是可以给被遮盖的元素添加颜色,被遮盖的元素会按照遮罩的规则来渐变显示,参考:

http://img1.sycdn.imooc.com//climg/5baed92b00017de409420053.jpg

自己测试下,祝学习愉快~~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师