请问老师渐变遮罩

老师我不明白，为什么半圆左边是白色渐变到右边黑色。
代码中线性渐变从左到右，且加上了一层矩形遮罩。为白色从透明到不透明。
按理说遮罩从左到右是透明白色到不透明的白色，难道半圆显示不应该是黑色到白色的渐变吗？为什么视频中是从白色到黑色的渐变？？？？

hy_wang 2018-07-25

源自：SVG滤镜及动画效果 2-4 遮罩效果

收起

5回答

Miss路回答被采纳获得+3积分 2018-08-03 09:56:54

要做渐变效果的话，确实不止这一种实现方式，做遮罩效果也不止这一种方式，这里是svg中有这样一个知识点也能同样的功能，老师是针对一个知识做的讲解。如果大家在以后要求用svg实现的时候，这个也是一种实现方式，具体用哪种要看实际的需求。

另外你说的后半句“ 以及老师我测试遮罩其他背景色无效果在引用没有效果，这是为什么”这个具体是什么情况我不太了解，你可以上传完整的代码。

一定要注意自己的学习方式，灵活运用，并且，要会学习，提问的时候，一定要说明白自己的疑问或者需求，如果是涉及到代码的，一定要粘贴完整的代码，这样老师才能高效、准确的给出你解决方式。另外，不要在一个问题中反复的提问，这样消息过多的情况下可能会漏掉一条两条，有新问题就提出新的问答会更保险哦。

祝学习愉快！

收起回答

Miss路 2018-07-29 15:05:55

视频中，老师讲的是，遮罩是实现一个从透明遮罩到不透明的一个过程。透明的时候，会显示下面的白色，不透明的时候，那就是本身遮罩层的黑色了。所以整体效果看起来就是从白色到黑色的一个渐变过程。

如果帮助到了你，欢迎采纳！

收起回答

提问者 hy_wang #1

老师我不懂，矩形的填充色是黑色。遮罩的填充色是白色从透明到不透明的渐变白色。矩形定义了mask也就是定义了遮罩。我的理解是黑色的矩形上边盖了一层白色的遮罩。遮罩的颜色从左到右是透明到不透明。遮罩盖在了矩形上没错吧，遮罩透明的时候应该漏出了底部的矩形，而矩形的填充色是黑色不应该是一个从左到右黑色到白色的吗，为什么代码是白色到黑色的半圆。我的理解哪里出现了问题，请老师指教

2018-07-31 22:54:00
好帮手慕夭夭回复提问者 hy_wang #2

渐变遮罩的原理并不是同学理解的那样 , 设置的遮罩可以把它看成模板一样 , 遮罩的渐变从透明到不透明 , 把它引用到矩形身上 , 矩形就要按照模板的渐变规则设置成透明到不透明 . 并非同学理解的遮罩透明漏出底部的矩形 . 遮罩是看不到的 ,只是作为一个模板 , 让矩形按照他的渐变规则去渲染渐变哦

2018-08-01 09:43:21
提问者 hy_wang 回复好帮手慕夭夭 #3

那请问老师遮罩有什么实际作用？假如只是作为模板理解我认为使用渐变色的rgba就可以达到遮罩的效果阿。以及老师我测试遮罩其他背景色无效果在引用没有效果，这是为什么

2018-08-02 21:29:04

点开查看后面1条评论

好帮手慕夭夭 2018-07-27 14:36:01

根据同学上传的代码 , 定义了一个色彩渐变，这个渐变有两个渐变关键点，这两个渐变的关键点是一样的都是白色，但是透明度从0过渡到了1，也就是从透明过渡到了不透明，定义<mask>元素，它含有一个矩形子元素，这个矩形引用了定义的色彩渐变，这个矩形也就具有了从左到右，从透明到不透明的效果哦 .

希望解答了你的疑惑 , 祝学习愉快 , 望采纳

收起回答

提问者 hy_wang #1

请问老师应该如何理解遮罩，我想不通。。遮罩不就是按理盖在了元素上方。既然遮罩是白色的是从透明到不透明，那么刚好也就是遮罩下面的元素从可以看到到看不到元素（遮罩不透明了），可为什么是相反的

2018-07-27 19:55:18

提问者 hy_wang 2018-07-26 19:00:29

老师在吗。。

收起回答

提问者 hy_wang 2018-07-25 22:24:30

<svg  style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<linearGradient id='one'>
			<stop offset='0' stop-color='white' stop-opacity='0'/>
			<stop offset='100' stop-color='white'  stop-opacity='1'/>
		</linearGradient>
		<mask id='mask'>
			<rect x='0' y='0' width='50' height='50' fill='url(#one)'/>
		</mask>
	</defs>
	<rect x='0' y='0' width="100" height='100' mask='url(#mask)' fill='black'/>
</svg>

就比如这段代码我的理解是本身画布上具有一个100 100的rect fill为黑色，加上一个 50 50的rect遮罩，遮罩的颜色是从完全透明（0）的白色到完全不透明的白色（1）。那么画布上显示的rect不应该是从黑色到白色的显示吗。为什么是从白色到黑色的显示？

收起回答

_是你_ #1

使用遮罩和渐变只是为了达到渐变的一个透明度效果 , 渐变引用到了遮罩上面 , 最后遮罩引用在矩形上面 , 所以透明度的变化应该是作用在黑色背景上面 , 并不是白色透明度去显示下面的黑色背景 , 老铁不必纠结这个 , 意义不大哈哈

2018-07-26 10:39:34
提问者 hy_wang 回复 _是你_ #2

请问应该如何理解遮罩，我想不通。。遮罩不就是按理盖在了元素上方。既然遮罩是白色的是从透明到不透明，那么刚好也就是遮罩下面的元素从可以看到到看不到元素（遮罩不透明了），可为什么是相反的

2018-07-27 19:55:37