feMerge：多滤镜叠加滤镜

<linearGradient>可用来定义 SVG 的线性渐变，主要是定义方向和颜色。

<radialGradient> 可用来定义 SVG 的径向渐变，主要是定义方向和颜色。

1.线性渐变

<linearGradient>可用来定义 SVG 的线性渐变，主要是定义方向和颜色。

1. 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
2. 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
3. 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<linearGradient id="linear" x1="40%" y1="60%" x2="60%" y2="40%"> <!-- 设置渐变染色 --> <stop offset="40%" stop-color="red"></stop> <stop offset="70%" stop-color="blue"></stop> <stop offset="100%" stop-color="yellow"></stop> </linearGradient> </defs> <rect x="0" y="0" width="300" height="300" fill="url(#linear)" stroke="green"></rect>

2.径向渐变

<radialGradient> 可用来定义 SVG 的径向渐变，主要是定义方向和颜色。

<radialGradient id="radial" cx="70%" cy="50%" r="80%" fx="50%" fy="30%"> <stop offset="40%" stop-color="red"></stop> <stop offset="70%" stop-color="blue"></stop> <stop offset="100%" stop-color="yellow"></stop> </radialGradient> </defs> <text x="200" y="200" font-size="40" fill="url(#radial)">SVG</text>

feBlend：与图像相结合的滤镜

feColorMatrix：用于彩色滤光片转换

feGaussianBlur：模糊滤镜

feMerge：多滤镜叠加滤镜

2.模糊阴影

代码如下（示例）：

<!-- 定义滤镜，defs是一个定义标签 --> <filter id="f1" width="200%" height="200%"> <!-- 使用偏移滤镜 filler --> <feOffset in="SourceGraphic" result="offset1" dx="20" dy="20"></feOffset> <!-- 模糊滤镜 stdDeviation --> <feGaussianBlur in="offset1" stdDeviation="5" > </feGaussianBlur> <!-- 使用混合滤镜，主要将原始标签显示出来 --> <feBlend in="SourceGraphic" in2="offset" mode="multiply"></feBlend> </filter> </defs> <rect x="0" y="0" width="200" height="100" fill="orange" stroke="black" filter="url(#f1)"></rect> <!-- 定义滤镜，defs是一个定义标签 --> <filter id="f1" width="200%" height="200%"> <!-- 使用偏移滤镜 filler --> <feOffset in="SourceGraphic" result="offset1" dx="20" dy="20"></feOffset> <feColorMatrix result="colorMatrix" in="offset1" type="matrix" values="0.2 0 0 0 0 0 1 0 0 0 0 0 1 1 0 0 0 0 1 0"></feColorMatrix> <!-- 模糊滤镜 stdDeviation --> <feGaussianBlur in="colorMatrix" stdDeviation="5" > </feGaussianBlur> <!-- 使用混合滤镜，主要将原始标签显示出来 --> <feBlend in="SourceGraphic" in2="offset" mode="normal"></feBlend> </filter> </defs> <rect x="0" y="0" width="200" height="100" fill="orange" stroke="black" filter="url(#f1)"></rect>

以上就是今天要讲的内容，本文讲了svg简单的渐变，阴影，简单记忆加以理解即可。

feBlend与图像相结合的滤镜用于彩色滤光片转换模糊滤镜feMerge多滤镜叠加滤镜可用来定义SVG的线性渐变，主要是定义方向和颜色。可用来定义SVG的径向渐变，主要是定义方向和颜色。当y1和y2相等，而x1和x2不同时，可创建水平渐变当x1和x2相等，而y1和y2不同时，可创建垂直渐变当x1和x2不同，且y1和y2不同时，可创建角形渐变...

使用react-native- svg 创建梯度路径的实用程序react-native- svg -path- gradient 添加了 目录用于创建沿自定义路径的 颜色 梯度目录安装道具示例许可证安装使用npm npm install react-native- svg -path- gradient 使用Yarn yarn添加react-native- svg -path- gradient 道具该组件不共享一样的道具 来自react-native- svg 。 仅以下列出的道具可用：道具名称类型默认值d字符串- 颜色 字符串[] radial Gradient 用来定义径向 渐变 ，以对图形元素进行填充或描边。 说人话，就是定义辐射性 渐变 ，就是以一个点为圆心，向周围进行 颜色 渐变 。前面有文章讲解了线性 渐变 ，有兴趣的可以点击查看：line Gradient 线性 渐变 -- SVG _9_线性 颜色 渐变 _竖排文字_ 动画 使用 radial Gradient 的方式与使用line Gradient 的方式一样，都是在defs标签中定义的，然后通过url(#id)的方式进行引用。不仅可以用在fill填充，还可以应用在stroke描边上。这里其实和另一个

< svg width="200" height="200"> < radial Gradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color: #ff00ff;stop-opacity: 1" /> <stop offset="100%" style="stop-color: #00ffff;stop-opacity: 1" /> </ radial Gradient > </defs> <circle cx="100" cy="100" r="50" fill="url(#grad)"> <animate attributeName="fill" values="#ff00ff;#00ffff;#ff00ff" dur="5s" repeatCount="indefinite"></animate> </circle> </ svg > 在这个示例中，使用`< radial Gradient >`定义了一个径向 渐变 ， 渐变 从紫色到青色。然后使用`<circle>`元素创建一个圆形，填充 颜色 使用`fill="url(#grad)"`指定为径向 渐变 。最后，使用`<animate>`元素创建一个 颜色 动画 ，让圆形的填充 颜色 在紫色和青色之间循环播放，时长为5秒，重复次数为无限次。 运行该代码，会在浏览器中显示一个带有 颜色 渐变 动画 的圆形。