admin管理员组

文章数量:1516870

Svg颜色渐变和阴影

文章目录

• 前言
• 一、svg渐变
• 二、svg阴影
• 总结

---

前言

Svg滤镜包括：

feBlend：与图像相结合的滤镜

feColorMatrix：用于彩色滤光片转换

feGaussianBlur：模糊滤镜

feMerge：多滤镜叠加滤镜

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

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

---

一、渐变 

  1.线性渐变

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

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

 <svg><defs><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> </svg>

2.径向渐变

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

<svg><defs><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>  
</svg>

 

二、阴影

1.滤镜

feBlend：与图像相结合的滤镜

feColorMatrix：用于彩色滤光片转换

feGaussianBlur：模糊滤镜

feMerge：多滤镜叠加滤镜

2.模糊阴影

代码如下（示例）：

 <svg><!-- 定义滤镜，defs是一个定义标签 --><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></svg>

 

改变颜色

 <svg><!-- 定义滤镜，defs是一个定义标签 --><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>

---

总结

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

本文标签： Svg颜色渐变和阴影