<filter id="f1" x="-250%" y="-250%" width="500%" height="500%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
<feOffset dx="0" dy="3"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feBlend in="SourceGraphic"/>
</filter>
| 标签名称 | 参数 | 说明 |
|---|---|---|
| <filter> 滤镜 |
id | 对象使用 filter="url(#id)" 进行使用 |
| x,y | 滤镜画布起始坐标 （如果下面的宽高参数变大，起始坐标需要调整才能居中，一般是负的宽高/2） |
|
| width,height | 滤镜宽度、高度（如果使用了模糊效果，滤镜画布的大小需要增加，不然会被截取） | |
| <feGaussianBlur> 高斯模糊 |
in | 输入，参数可以是 - SourceGraphic 源外观 - SourceAlpha 源透明度(黑色) |
| stdDeviation | 模糊程度 | |
| <feOffset> 偏移 |
dx,dy | 偏移的参数 |
| <feComponentTransfer> 滤镜组件变换 |
||
| <feFuncA> 透明度 <feFuncR> 红色 <feFuncG> 绿色 <feFuncB> 蓝色 |
type | 类型，参数可以是 - linear 线性 |
| slope | 数值 | |
| <feBlend> 滤镜混合输出 |
in | 输入（将原图一起渲染） |
贴个实例给大家参考
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24">
<filter id="f1" x="-250%" y="-250%" width="500%" height="500%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
<feOffset dx="0" dy="3"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feBlend in="SourceGraphic"/>
</filter>
<linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="24" y2="24" gradientTransform="matrix(1 0 0 -1 0 24)">
<stop offset="0" style="stop-color:#CE00E9"/>
<stop offset="1" style="stop-color:#FF94AC"/>
</linearGradient>
<path fill="url(#g1)" filter="url(#f1)" d="M12,4L5,8v8l7,4l7-4V8L12,4z M6.7410002,9h10.5179987L12,18.0149994L6.7410002,9z M12,5.152L16.9839993,8H7.0159998L12,5.152z M6,15.4200001V9.7139997l4.9920006,8.5579996L6,15.4200001z M18,15.4200001l-4.9920006,2.8530006L18,9.7139997v5.7049999V15.4200001z"/>
</svg>
