请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
上帝说要有光,于是就有了光。要有光,其实得先有光源,起初光源是一个点,svg 的 光源滤镜 fePointLight 描述的就是点光源,莫非它就是上帝创建的光源点?不管它。我们知道,光照射在物体上,部分光被物体吸收,吸收不完的部分则反射出来,反射出来的光描述了物体的形状、质地,人因此能看到物体。反射滤镜难道就是上帝创造的杰作呢?鹅鹅,当然不是!上帝是人类智慧的虚拟依托而已——人类太有智慧,但不知道智慧从何而来、为何如此厉害,人就说,要有上帝,于是就有了上帝,于是还有了光和滤镜。嗯嗯,光与光的反射让人看见东西,于是人类为 svg 创建了反射滤镜,其中,feDiffuseLighting,叫漫反射滤镜,我们今天要配合点滤镜 fePointLight 进行学习。这里注意一下,svg 光的滤镜中,光源滤镜的 Light 不要后缀 -ing,反射率竟则有 -ing 后缀。
先简单说说点光源滤镜(fePointLight):它营造光的起源,使用 xy 坐标指定光点水平和垂直方向的起始位置、z坐标指定光点纵深位置,这是三维的点光源。下面的代码,坐标体系默认基于 svg 画布,规定点光源的中心在水平方向的40px、垂直方向的40px开始,Z坐标为 10px。
<fePointLight x="40" y="40" z="10"></fePointLight>
在 svg 光滤镜世界里,光源被反射滤镜所拥有的。漫射滤镜 feDiffuseLighting 作为父标签出现,其内拥有一个点光源 fePointLight 标签,二者以父子关系共同构建光滤镜组。其他的光滤镜也都照这个模式工作。漫射滤镜的简单用法演示代码如下:
<feDiffuseLighting in="SourceGraphic" lighting-color="#fff" result="light">
<fePointLight x="40" y="40" z="10"></fePointLight>
</feDiffuseLighting>
代码中,in 属性指定滤镜的作用对象,SourceGraphic 指源图形即调用滤镜者图形,lighting-color 属性指定光的颜色,result 是给漫射滤镜指定的快照标识。光滤镜中有了光源滤镜和漫射滤镜还不行,还需要合成,所以需要在其后使用 feComposite 滤镜用来描述光滤镜组如何完成细节工作:
<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>
合成细节是,以 arithmetic 智能组件按 k1~k4 规定的值去操作图像合成,将源2(in2)将漫射滤镜的效果作用于作用对象(in="SourceGraphic")。下面是完整代码和效果,为了比较,这里设置了两个圆(circle)图形对象,第二个圆不加滤镜:
<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>
上例,我们能明显看到光点的起源,在圆的左上角,同时也能明显看到慢射效果,一圈一圈地从原点向右下扩展开来。当然,整体滤镜效果取决于诸多因素的共同作用,包括各个滤镜的属性、合成滤镜的配置、源图形的背景颜色等等,而标签属性当中,漫射滤镜的 lighting-color 总体上规定的是光及反射光的颜色,但最终体现出来的效果也同时取决于其他因素的共同作用。
【提示】svg 子元素标签,多数情形下,可以是自闭合标签,出于需要也可以写成非自闭合标签,即可以拥有开始标签和结束标签。
|