[发明专利]一种使用多重滤镜实现SVG的辉光效果的方法

说明书

本发明公开一种使用多重滤镜实现SVG的辉光效果的方法。本发明能够很好的解决svg元素无法简单使用CSS属性实现辉光效果的方法，可以根据需要与诸如动画、图片之类的结合，使得网站整体效果更为酷炫。

技术领域

本发明涉及浏览器技术领域，尤其涉及一种使用多重滤镜实现SVG的辉光效果的方法。

背景技术

浏览器的文字或诸如div或span之类的普通元素，在实现辉光效果时，可以使用box-shadow或text-shadow等CSS属性来实现。目前浏览器在进行svg元素的辉光效果的显示时，使用box-shadow或text-shadow等CSS属性是无效的。因此，现有技术存在缺陷，需要改进。

发明内容

本发明要解决的技术问题是：提供一种使用多重滤镜实现SVG的辉光效果的方法，以便浏览器对svg元素进行辉光效果的显示。

本发明的技术方案如下：提供一种使用多重滤镜实现SVG的辉光效果的方法，基于浏览器的svg元素的defs元素的filter元素，包括以下步骤。

S1：定义若干高斯模糊滤镜，高斯模糊滤镜的原始输入属性均设置为SourceGraphic，即表示将图形自身作为filter原语的原始输入；高斯模糊滤镜的模糊量属性在不同的高斯模糊滤镜内分别设置若干个互不相等的整数值；使用滤镜分配名属性为不同的高斯模糊滤镜分别设置不同的滤镜分配名blur-N。所述blur-N中的N为自然数。

S2：使用合并滤镜feMerge，通过其子元素feMergeNode将除了模糊量最小的一个高斯模糊滤镜外的其它所有高斯模糊滤镜拿到并放入滤镜原始输入属性，并给回合并滤镜进行合并；合并后再设置一个滤镜分配名blur-merged。

S3：使用RGBA颜色转换矩阵滤镜，设置矩阵滤镜原始输入属性为blur-merged，设置类型属性type为matrix，设置矩阵滤镜的矩阵值values；设置一个滤镜分配名color-blur。所述矩阵滤镜为4*5的矩阵，矩阵的数值为-255至255之间的数值。颜色矩阵滤镜将每个源像素分离成它的红色、绿色、蓝色和Alpha成分，分别以srcR、srcG、srcB和srcA表示。若要计算四个通道中每个通道的结果，可将图像中每个像素的值乘以转换矩阵中的值。颜色矩阵滤镜将各颜色成分重新组合为单一像素，并写出结果。

S4：再次使用合并滤镜，将之前模糊值最小的高斯模糊滤镜与color-blur滤镜、图形自身的原始输入属性SourceGraphic进行合并。模糊值最小的高息模糊滤镜为白光滤镜。

S5：filter元素设置属性id值为color-glow，作为导出后的辉光滤镜，应用到所需的svg元素上。

进一步地，所述color-blur、color-glow中的color为实际需要的颜色。

采用上述方案，本发明提供一种使用多重滤镜实现SVG的辉光效果的方法，能够很好的解决svg元素无法简单使用CSS属性实现辉光效果的方法，可以根据需要与诸如动画、图片之类的结合，使得网站整体效果更为酷炫。

附图说明

图1为本发明的方法流程图；

图2为本发明的一实施例的效果图。

具体实施方式

以下结合附图和具体实施例，对本发明进行详细说明。

请参阅图1和图2，本实施例提供一种使用多重滤镜实现SVG的辉光效果的方法，基于浏览器的svg元素的defs元素的filter元素，包括以下步骤。