svg : 光滤镜（二）
<style>.ma p { margin: 8px 0; }
.rred { color: red; }
.green { color: green; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
.mypic { filter: url(#f1); }
</style>
<div class="ma">
<h2>feSpecularLighting 镜面反射滤镜</h2>
<p>feSpecularLighting 是镜面反射滤镜，它与 feDiffuseLighting 漫射反射滤镜一样，都是基于 alpha 通道实现隆起映射，且光的颜色也是通过光照滤镜的 lighting-color 属性来决定。不同的是，镜面反射滤镜所作用的对象，在光照不到的地方呈现透明。 </p>
<p>同样的，镜面反射滤镜也需要光源，本讲仍以点光源 fePointLight 滤镜作为子光源滤镜，先来看看代码：</p>
<pre>
<feSpecularLighting in="SourceGraphic" surfaceScale="3" lighting-color="red" result="light">
<fePointLight x="50" y="50" z="10" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="light" operator="out" />
</pre>
<p>这里，镜面反射滤镜的 surfaceScale 属性用来定义图形基底的高度，通过它可以控制光源与图形的距离，默认值为 1，可以根据需要任意设置，feSpecularLighting 和 feDiffuseLighting 滤镜都可以使用。result="light" 的光滤镜组使用 feComposite 进行合成处理，将其（in2="light"）对输入源即作用对象图形（in="SourceGraphic"）进行剪切，形成最终效果。下面的完整演示实例，滤镜作用于第一个圆，第二个圆土生土长没加滤镜：</p>
<pre>
<svg width="400" height="200" style="border: 1px solid gray;">
<filter id="f">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" lighting-color="red" result="light">
<fePointLight x="50" y="50" z="10" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="light" operator="out" />
</filter>
<circle cx="100" cy="100" r="90" fill="green" filter="url(#f)"></circle>
<circle cx="300" cy="100" r="90" fill="green"></circle>
</svg>
</pre>
<svg width="400" height="200" style="border: 1px solid gray;">
<filter id="f">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" lighting-color="red" result="light">
<fePointLight x="50" y="50" z="10" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="light" operator="out" />
</filter>
<circle cx="100" cy="100" r="90" fill="green" filter="url(#f)"></circle>
<circle cx="300" cy="100" r="90" fill="green"></circle>
</svg>
<p>上例的效果中，点光源的光照在 {50,50} 处，呈现出白色，说明 lighting-color="red" 设置不起作用——这与合成滤镜的 operator="out"有关。光点之外就是光未照到的地方，呈现出一定程度的透明度，与底色（green）共同作用，形成镜面反射效果。</p>
</div>
用out的时候，好像lighting-color设成什么颜色都没用呢。 这个好像还剩个绿边呢{:4_173:} 去试了over、in、atop、xor、lighter，每一个都不一样，有点晕。 红影 发表于 2023-10-21 15:08
去试了over、in、atop、xor、lighter，每一个都不一样，有点晕。
它们就是不一样的。
严格来说吧，做光的滤镜，应使用的操作方式是 arithmetic 智能算法的，这里只是为了更简洁演示 红影 发表于 2023-10-21 15:04
这个好像还剩个绿边呢
这是用 xor 的缘故。本帖，仅需要理解镜面反射滤镜 红影 发表于 2023-10-21 15:01
用out的时候，好像lighting-color设成什么颜色都没用呢。
它们都各有定义 马黑黑 发表于 2023-10-21 18:09
它们就是不一样的。
严格来说吧，做光的滤镜，应使用的操作方式是 arithmetic 智能算法的，这里只是为了 ...
哦，原来还有这么多细节问题。 马黑黑 发表于 2023-10-21 18:10
这是用 xor 的缘故。本帖，仅需要理解镜面反射滤镜
是学习这个滤镜，所以暂时不考虑别的吧。 马黑黑 发表于 2023-10-21 18:10
它们都各有定义
是的，用别的时候看到光的颜色还在。 红影 发表于 2023-10-21 23:06
是的，用别的时候看到光的颜色还在。
是的哦 红影 发表于 2023-10-21 23:05
是学习这个滤镜，所以暂时不考虑别的吧。
你要考虑也行 红影 发表于 2023-10-21 23:05
哦，原来还有这么多细节问题。
太多 马黑黑 发表于 2023-10-22 00:05
是的哦
说明即使看不到，颜色仍然存在的。 马黑黑 发表于 2023-10-22 00:05
你要考虑也行
没本事考虑别的啊{:4_173:} 马黑黑 发表于 2023-10-22 00:05
太多
很多都是细节问题。 红影 发表于 2023-10-22 11:09
很多都是细节问题。
没错，还特别抽象，官网的文档有好多什么都没说 红影 发表于 2023-10-22 11:08
没本事考虑别的啊
那就不考虑 红影 发表于 2023-10-22 11:07
说明即使看不到，颜色仍然存在的。
对。人眼能分辨出来的光波其实非常有限 马黑黑 发表于 2023-10-22 11:16
没错，还特别抽象，官网的文档有好多什么都没说
真真掌握这个也挺不容易的呢{:4_204:}