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">
<p>上帝说要有光，于是就有了光。要有光，其实得先有光源，起初光源是一个点，svg 的 光源滤镜 fePointLight 描述的就是点光源，莫非它就是上帝创建的光源点？不管它。我们知道，光照射在物体上，部分光被物体吸收，吸收不完的部分则反射出来，反射出来的光描述了物体的形状、质地，人因此能看到物体。反射滤镜难道就是上帝创造的杰作呢？鹅鹅，当然不是！上帝是人类智慧的虚拟依托而已——人类太有智慧，但不知道智慧从何而来、为何如此厉害，人就说，要有上帝，于是就有了上帝，于是还有了光和滤镜。嗯嗯，光与光的反射让人看见东西，于是人类为 svg 创建了反射滤镜，其中，feDiffuseLighting，叫漫反射滤镜，我们今天要配合点滤镜 fePointLight 进行学习。这里注意一下，svg 光的滤镜中，光源滤镜的 Light 不要后缀 -ing，反射率竟则有 -ing 后缀。</p>
<p>先简单说说点光源滤镜（fePointLight）：它营造光的起源，使用 xy 坐标指定光点水平和垂直方向的起始位置、z坐标指定光点纵深位置，这是三维的点光源。下面的代码，坐标体系默认基于 svg 画布，规定点光源的中心在水平方向的40px、垂直方向的40px开始，Z坐标为 10px。</p>
<pre><fePointLight x="40" y="40" z="10"></fePointLight></pre>
<p>在 svg 光滤镜世界里，光源被反射滤镜所拥有的。漫射滤镜 feDiffuseLighting 作为父标签出现，其内拥有一个点光源 fePointLight 标签，二者以父子关系共同构建光滤镜组。其他的光滤镜也都照这个模式工作。漫射滤镜的简单用法演示代码如下：</p>
<pre>
<feDiffuseLighting in="SourceGraphic" lighting-color="#fff" result="light">
<fePointLight x="40" y="40" z="10"></fePointLight>
</feDiffuseLighting>
</pre>
<p>代码中，in 属性指定滤镜的作用对象，SourceGraphic 指源图形即调用滤镜者图形，lighting-color 属性指定光的颜色，result 是给漫射滤镜指定的快照标识。光滤镜中有了光源滤镜和漫射滤镜还不行，还需要合成，所以需要在其后使用 feComposite 滤镜用来描述光滤镜组如何完成细节工作：</p>
<pre>
<feDiffuseLighting in="SourceGraphic" lighting-color="#fff" result="light">
<fePointLight x="40" y="40" z="10"></fePointLight>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"></feComposite>
</pre>
<p>合成细节是，以 arithmetic 智能组件按 k1~k4 规定的值去操作图像合成，将源2（in2)将漫射滤镜的效果作用于作用对象（in="SourceGraphic"）。下面是完整代码和效果，为了比较，这里设置了两个圆（circle）图形对象，第二个圆不加滤镜：</p>
<pre>
<svg width="400" height="200" style="border: 1px solid gray;">
<filter id="lightPoint">
<feDiffuseLighting in="SourceGraphic" lighting-color="#fff" result="light">
<fePointLight x="40" y="40" z="10"></fePointLight>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"></feComposite>
</filter>
<circle cx="100" cy="100" r="90" fill="steelblue" filter="url(#lightPoint)"></circle>
<circle cx="300" cy="100" r="90" fill="steelblue"></circle>
</svg>
</pre>
<svg width="400" height="200" style="border: 1px solid gray;">
<filter id="lightPoint">
<feDiffuseLighting in="SourceGraphic" lighting-color="#fff" result="light">
<fePointLight x="40" y="40" z="10"></fePointLight>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"></feComposite>
</filter>
<circle cx="100" cy="100" r="90" fill="steelblue" filter="url(#lightPoint)"></circle>
<circle cx="300" cy="100" r="90" fill="steelblue"></circle>
</svg>
<p>上例，我们能明显看到光点的起源，在圆的左上角，同时也能明显看到慢射效果，一圈一圈地从原点向右下扩展开来。当然，整体滤镜效果取决于诸多因素的共同作用，包括各个滤镜的属性、合成滤镜的配置、源图形的背景颜色等等，而标签属性当中，漫射滤镜的 lighting-color 总体上规定的是光及反射光的颜色，但最终体现出来的效果也同时取决于其他因素的共同作用。</p>
<p>【提示】svg 子元素标签，多数情形下，可以是自闭合标签，出于需要也可以写成非自闭合标签，即可以拥有开始标签和结束标签。</p>
</div>
feDiffuseLighting滤镜之下，未被光照的地方呈现黑色，所以使用了该滤镜的图形，会比原色呈现更深的颜色 这个真漂亮，真的能看到漫反射的效果呢。
没想到用白色的光去反射，得到的却是比原图更深的颜色？是因为合成导致的效果么？ 这个用到了上一节课的内容，赶紧复习一下，operator="合成方式"，合成方式里有over、in、atop、xor、arithmetic ，智能组件 arithmetic ，还需加上 k1、k2、k3、k4 属性，—— k1 控制重叠的图像亮度，k2 控制输入源 in 亮度，k3 控制输入源 in2 的输入亮度，k4 亮度偏移量。
昨天的k1-k4到底怎么用的就有点模糊，今天的已经是实际应用了，仍然迷糊着{:4_173:} 如果换成昨天的k1="1" k2="0.1" k3="0.1" k4="0.2" 结果就是灰突突的了，显现出来的颜色果然是和合成有关。 很有立体感啊。点光源的xy事定位的，z去试了一下，5-20之类的能清楚地看到光源点的位置，40以上就觉得那个点的位置很模糊了，但看光的走向，仍然能感觉到光源点的大致位置。 上帝说要有光，于是就有了光。这个讲解的语言很风趣，非常生动的一堂课{:4_173:} 红影 发表于 2023-10-20 13:41
上帝说要有光，于是就有了光。这个讲解的语言很风趣，非常生动的一堂课
这是旧约里的语句 红影 发表于 2023-10-20 13:39
很有立体感啊。点光源的xy事定位的，z去试了一下，5-20之类的能清楚地看到光源点的位置，40以上就觉得那个 ...
嗯，是应该试一下 红影 发表于 2023-10-20 13:20
这个真漂亮，真的能看到漫反射的效果呢。
没想到用白色的光去反射，得到的却是比原图更深的颜色？是因为合 ...
二楼那里有说明 红影 发表于 2023-10-20 13:32
如果换成昨天的k1="1" k2="0.1" k3="0.1" k4="0.2" 结果就是灰突突的了，显现出来的颜色果然是和合成有关。
对的。k1~k4有一整套规范。 红影 发表于 2023-10-20 13:25
这个用到了上一节课的内容，赶紧复习一下，operator="合成方式"，合成方式里有over、in、atop、xor、arithm ...
这个先不管，若感兴趣，可以自行查查资料 反正看你俩的交流都是高科技，我是看不懂{:4_204:} 马黑黑 发表于 2023-10-20 19:33
这是旧约里的语句
这个帖子里的更进一步，不但有光，还有光的反射{:4_173:} 马黑黑 发表于 2023-10-20 19:34
嗯，是应该试一下
把光点放在不同位置上也很有趣。Z的取值的确有影响呢，试过了才感受到了。 马黑黑 发表于 2023-10-20 19:34
二楼那里有说明
光顾着看帖子了，没注意二楼，这次进来才看到，原来黑黑早就说明了{:4_173:} 马黑黑 发表于 2023-10-20 19:35
对的。k1~k4有一整套规范。
这个觉得特别难了，完全摸不到边。 马黑黑 发表于 2023-10-20 19:36
这个先不管，若感兴趣，可以自行查查资料
还是算了，我能先把简单的学一下就已经不容易了{:4_173:} 红影 发表于 2023-10-20 20:05
还是算了，我能先把简单的学一下就已经不容易了
也好 红影 发表于 2023-10-20 20:05
这个觉得特别难了，完全摸不到边。
数学一般都需要慢慢领会