SVG使用<filter>元素来定义滤镜。 <filter>元素使用一个id属性来唯一标识它。滤镜在<def>元素中定义，然后由它们的id通过图形元素引用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8880.html
SVG提供了一组丰富的滤镜。 以下是常用滤镜的列表。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8880.html
feBlendfeColorMatrixfeComponentTransferfeCompositefeConvolveMatrixfeDiffuseLightingfeDisplacementMapfeFloodfeGaussianBlurfeImagefeMergefeMorphologyfeOffset - filter for drop shadowsfeSpecularLightingfeTilefeTurbulencefeDistantLightfePointLightfeSpotLight
声明
以下是<filter>元素的语法声明。这里只显示一些主要属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8880.html
<filter
filterUnits="units to define filter effect region"
primitiveUnits="units to define primitive filter subregion"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
filterRes="numbers for filter region"
xlink:href="reference to another filter" >
</filter>
属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8880.html
| 编号 | 名称 | 描述 |
|---|---|---|
| 1 | filterUnits | 用来定义滤镜效果区域的单位。 它为滤镜中的各种长度值以及定义滤镜子区域的属性指定了坐标系。 如果filterUnits =“userSpaceOnUse”，则值表示使用'filter'元素时当前用户坐标系中的值。 如果filterUnits =“objectBoundingBox”，值表示在使用'filter'元素时就地引用元素上边界框的分数或百分比值。 默认是userSpaceOnUse。 |
| 2 | primitiveUnits | 用来定义滤镜效果区域的单位。 它为滤镜中的各种长度值以及定义滤镜子区域的属性指定了坐标系。 如果filterUnits =“userSpaceOnUse”，则值表示使用'filter'元素时当前用户坐标系中的值。 如果filterUnits =“objectBoundingBox”，值表示在使用'filter'元素时就地引用元素上边界框的分数或百分比值。 默认是userSpaceOnUse。 |
| 3 | x | 滤镜边界框的x轴坐标。 缺省值是0。 |
| 4 | y | 滤镜边界框的y轴坐标。 缺省值是0。 |
| 5 | width | 滤镜边界框的宽度。 缺省值是0。 |
| 6 | height | 滤镜边界框的高度。 缺省值是0。 |
| 7 | filterRes | 代表滤镜区域的数字。 |
| 8 | xlink:href | 用于指另一个滤镜。 |
示例
文件:testSVG.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8880.html
<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Blur Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter1)" />
</g>
</svg>
</body>
</html>
以下是上述代码的一些说明 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8880.html
- 两个
<filter>元素定义为filter1和filter2。 feGaussianBlur滤镜效果使用stdDeviation模糊量定义模糊效果。in="SourceGraphic"定义该效果适用于整个元素。feOffset滤镜效果用于创建阴影效果。in =“SourceAlpha”定义该效果适用于RGBA图形的Alpha部分。<rect>元素使用filter属性链接过滤器。
在Chrome浏览器中打开文件:textSVG.html，结果如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8880.html
滤镜与阴影效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8880.html
<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Shadow Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter2)" />
</g>
</svg>
</body>
</html>
在Chrome浏览器中打开文件:textSVG.html，结果如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8880.html