一种使用多重滤镜实现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：定义若干高斯模糊滤镜，高斯模糊滤镜的原始输入属性均设置为Source本文档来自技高网...

【技术保护点】

【技术特征摘要】
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...

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