一种使用多重滤镜实现SVG的辉光效果的方法技术

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

【技术实现步骤摘要】
一种使用多重滤镜实现SVG的辉光效果的方法


[0001]本专利技术涉及浏览器
，尤其涉及一种使用多重滤镜实现SVG的辉光效果的方法。

技术介绍

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

技术实现思路

[0003]本专利技术要解决的技术问题是：提供一种使用多重滤镜实现SVG的辉光效果的方法，以便浏览器对svg元素进行辉光效果的显示。
[0004]本专利技术的技术方案如下：提供一种使用多重滤镜实现SVG的辉光效果的方法，基于浏览器的svg元素的defs元素的filter元素，包括以下步骤。
[0005]S1：定义若干高斯模糊滤镜，高斯模糊滤镜的原始输入属性均设置为SourceGraphic，即表示将图形自身作为filter原语的原始输入；高斯模糊滤镜的模糊量属性在不同的高斯模糊滤镜内分别设置若干个互不相等的整数值；使用滤镜分配名属性为不同的高斯模糊滤镜分别设置不同的滤镜分配名blur
‑
N。所述blur
‑
N中的N为自然数。
[0006]S2：使用合并滤镜feMerge，通过其子元素feMergeNode将除了模糊量最小的一个高斯模糊滤镜外的其它所有高斯模糊滤镜拿到并放入滤镜原始输入属性，并给回合并滤镜进行合并；合并后再设置一个滤镜分配名blur
‑
merged。
[0007]S3：使用RGBA颜色转换矩阵滤镜，设置矩阵滤镜原始输入属性为blur
‑
merged，设置类型属性type为matrix，设置矩阵滤镜的矩阵值values；设置一个滤镜分配名color
‑
blur。所述矩阵滤镜为4*5的矩阵，矩阵的数值为
‑
255至255之间的数值。颜色矩阵滤镜将每个源像素分离成它的红色、绿色、蓝色和Alpha成分，分别以srcR、srcG、srcB和srcA表示。若要计算四个通道中每个通道的结果，可将图像中每个像素的值乘以转换矩阵中的值。颜色矩阵滤镜将各颜色成分重新组合为单一像素，并写出结果。
[0008]S4：再次使用合并滤镜，将之前模糊值最小的高斯模糊滤镜与color
‑
blur滤镜、图形自身的原始输入属性SourceGraphic进行合并。模糊值最小的高息模糊滤镜为白光滤镜。
[0009]S5：filter元素设置属性id值为color
‑
glow，作为导出后的辉光滤镜，应用到所需的svg元素上。
[0010]进一步地，所述color
‑
blur、color
‑
glow中的color为实际需要的颜色。
[0011]采用上述方案，本专利技术提供一种使用多重滤镜实现SVG的辉光效果的方法，能够很好的解决svg元素无法简单使用CSS属性实现辉光效果的方法，可以根据需要与诸如动画、图片之类的结合，使得网站整体效果更为酷炫。
附图说明
[0012]图1为本专利技术的方法流程图；
[0013]图2为本专利技术的一实施例的效果图。
具体实施方式
[0014]以下结合附图和具体实施例，对本专利技术进行详细说明。
[0015]请参阅图1和图2，本实施例提供一种使用多重滤镜实现SVG的辉光效果的方法，基于浏览器的svg元素的defs元素的filter元素，包括以下步骤。
[0016]S1：定义若干高斯模糊滤镜，高斯模糊滤镜的原始输入属性均设置为SourceGraphic，即表示将图形自身作为filter原语的原始输入；高斯模糊滤镜的模糊量属性在不同的高斯模糊滤镜内分别设置若干个互不相等的整数值；使用滤镜分配名属性为不同的高斯模糊滤镜分别设置不同的滤镜分配名blur
‑
N。所述blur
‑
N中的N为自然数。
[0017]S2：使用合并滤镜feMerge，通过其子元素feMergeNode将除了模糊量最小的一个高斯模糊滤镜外的其它所有高斯模糊滤镜拿到并放入滤镜原始输入属性，并给回合并滤镜进行合并；合并后再设置一个滤镜分配名blur
‑
merged。
[0018]S3：使用RGBA颜色转换矩阵滤镜，设置矩阵滤镜原始输入属性为blur
‑
merged，设置类型属性type为matrix，设置矩阵滤镜的矩阵值values；设置一个滤镜分配名color
‑
blur。所述矩阵滤镜为4*5的矩阵，矩阵的数值为
‑
255至255之间的数值。
[0019]在本实施例中，矩阵值
[0020]本实施例的矩阵值为偏蓝且中等绿且弱红的效果，可根据实际需要进行不同的矩阵值设置。
[0021]S4：再次使用合并滤镜，将之前模糊值最小的高斯模糊滤镜与color
‑
blur滤镜、图形自身的原始输入属性SourceGraphic进行合并。模糊值最小的高息模糊滤镜为白光滤镜。
[0022]S5：filter元素设置属性id值为color
‑
glow，作为导出后的辉光滤镜，应用到所需的svg元素上。
[0023]在本实施例中，所述color
‑
blur、color
‑
glow中的color为实际需要的颜色。在本实施例中，color为blue。
[0024]综上所述，本专利技术提供一种使用多重滤镜实现SVG的辉光效果的方法，能够很好的解决svg元素无法简单使用CSS属性实现辉光效果的方法，可以根据需要与诸如动画、图片之类的结合，使得网站整体效果更为酷炫。
[0025]以上仅为本专利技术的较佳实施例而已，并不用于限制本专利技术，凡在本专利技术的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本专利技术的保护范围之内。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种使用多重滤镜实现SVG的辉光效果的方法，其特征在于，基于浏览器的svg元素的defs元素的filter元素，包括以下步骤：S1：定义若干高斯模糊滤镜，高斯模糊滤镜的原始输入属性均设置为SourceGraphic，即表示将图形自身作为filter原语的原始输入；高斯模糊滤镜的模糊量属性在不同的高斯模糊滤镜内分别设置若干个互不相等的整数值；使用滤镜分配名属性为不同的高斯模糊滤镜分别设置不同的滤镜分配名blur
‑
N；S2：使用合并滤镜feMerge，通过其子元素feMergeNode将除了模糊量最小的一个高斯模糊滤镜外的其它所有高斯模糊滤镜拿到并放入滤镜原始输入属性，并给回合并滤镜进行合并；合并后再设置一个滤镜分配名blur
‑
merged；S3：使用RGBA颜色转换矩阵滤镜，设置矩阵滤镜原始输入属性为blur
‑
merged，设置类型属性type为matrix，设置矩阵滤镜的矩阵值values；设置一个滤镜分配名color
‑
blur；S...

【专利技术属性】
技术研发人员：王健，邹琼，周双全，
申请(专利权)人：深圳市瑞云科技股份有限公司，
类型：发明
国别省市：