svg动画，渐变，阴影

SVG 与 Canvas 两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

svg不会失帧，canvas在js中调用方法，svg直接使用标签绘制

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较：

Canvas

SVG

依赖分辨率；

不支持事件处理器；

弱的文本渲染能力；

能够以 .png 或 .jpg 格式保存结果图像；

最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

不依赖分辨率；

支持事件处理器；

最适合带有大型渲染区域的应用程序（比如谷歌地图）；

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）；

不适合游戏应用。

一，.绘制矩形

使用 rect 标签，主要属性：

x/y：绘图位置，
width/height：矩形长宽，
fill：填充颜色，默认黑色，
stroke：描边的颜色。
stroke-width：描边的宽度。
rx/ry：描边的圆角。

二，绘制圆

cx/cy：圆绘制的位置，圆心位置
r：圆的半径

三，绘制椭圆

cx/cy：椭圆绘制的位置，圆心的位置。
rx/ry：椭圆的半径。

四，绘制直线，折线多边形

4.1绘制直线

x1/y1：起点
x2/y2：终点
stroke：线条颜色，必须有

4.2，折线

points：设置所有折线的点。
fill：是否填充，默认填充。

4.3，多边形

方法一：折线从起点回到终点，就是多边形。

<svg width="500" height="500">
	<polyline points="100 300 300 300 300 350 100 300" stroke="red" fill="none"></polyline>
</svg>

方法二：关闭路径。

<svg width="500" height="500">
	<polygon points="100 400 300 400 300 450" stroke="red" fill="none"></polygon>
</svg>

polygon 和 polyline 差不多，只是会自动关闭路径。

1，svg阴影<defs>

svg允许我们定义以后需要重复使用的图形元素,建议把所有需要再次使用的引用元素定义在 <defs> 元素里面。这样做可以增加 SVG 内容在 <defs> 元素中定义的图形元素不会直接呈现。可以在视图的任意地方利用 <use> 元素呈现这些元素。

2.filter

filter> 元素作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标 SVG 元素上的 filter 属性引用一个滤镜。

<svg width="500" height="100">
	<defs>
		<filter id="blurFilter" y="-5" height="40">
			<feGaussianBlur in="SourceGraphic" stdDeviation="3"></feGaussianBlur>
		</filter>
	</defs>
	<ellipse cx="155" cy="60" rx="25" ry="15" stroke="none" fill="blue" filter="url(#blurFilter)"></ellipse>
</svg>

3.feoffset和feblend

feOffset> 将输入图像作为一个整体，通过属性 dx 和属性 dy 的值指定一个偏移量。

<feBlend> 滤镜把两个对象组合在一起，使它们受特定的混合模式控制。类似于图像编辑软件中混合两个图层。

将 <feOffset> 和 <feBlend> 结合在一起，即可创建图形的阴影效果。

<svg>
	<defs>
		<filter id="filter-offset" x="0" y="0" width="200%" height="200%">
			<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
			<feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
		</filter>
	</defs>
	<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-offset)"></rect>
</svg>

4.fegaussianblur

feGaussianBlur 滤镜可以对输入图像进行高斯模糊，并通过属性 stdDeviation 指定偏移的像素数量。(偏移图像可以变的模糊)

5.fecolormatrix

<svg>
	<defs>
		<filter id="filter-matrix" x="0" y="0" width="200%" height="200%">
			<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
			<feColorMatrix result="matrixOut" in="offOut" type="matrix" 
				values="0.2 0 0 0 0
						0 0.2 0 0 0
						0 0	0.2 0 0
						0 0 0 1 0" />
			<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>
			<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
		</filter>
	</defs>
	<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-matrix)"></rect>
</svg>

6.渐变

SVG 渐变主要有两种类型：

Linear：线性的。
Radial：径向的。

<linearGradient>

元素用来定义线性渐变，用于图形元素的填充或描边

x1	渐变开始的 x 轴位置。
x2	渐变结束的 x 轴位置。
y1	渐变开始的 y 轴位置。
y2	渐变结束的 y 轴位置。

线性渐变可以定义为水平、垂直或径向渐变：

当 y1 和 y2 相等且 x1 和 x2 不同时，将创建水平渐变。
当 x1 和 x2 相等且 y1 和 y2 不同时，将创建垂直渐变。
当 x1 和 x2 不同且 y1 和 y2 不同时，将创建径向渐变。

一个渐变上的颜色坡度，是用

<stop>

元素定义的。

参数	说明
offset	定义渐变开始/停止时的位置。
stop-color	定义渐变开始/停止时使用的颜色。
stop-opacity	定义渐变开始/停止时指定颜色的不透明度。

7.radialGradient—-径向渐变

radialGradient> 元素用来定义径向渐变，以对图形元素进行填充或描边。

参数说明：

参数	说明
cx	定义一个中心点的 x 轴坐标。
cy	定义一个中心点的 y 轴坐标。
r	定义圆的半径。
fx	定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
fy	定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
fr	定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。

8.SVG 动画

SVG 中提供三种常用动画标记：

标记	说明
<animate>	动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时间点改变。在指定持续时间里，属性从开始值变成结束值。
<animateTransform>	变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。
<animateMotion>	定义了一个元素如何沿着运动路径进行移动。

SVG 动画使用方式：

创建动画，告诉动画标记哪个元素需要执行动画
创建元素，在元素中说明需要执行什么动画

8.1 SVG动画常用属性

属性	作用	值
attributeName	标识了在一个动画动作环节中，父元素需要被改变的属性名。
from	svg 动画发生过程中被修改的属性的初始值。
to	svg 动画发生过程中被修改的属性的最终值。
dur	标识了动画的简单持续时间。
fill	在动画结束后，是否还要保持该动画。	`remove` ：在动画的激活持续时间结束后，动画效果会移除。这是默认值。 `freeze` ：在动画的激活持续时间结束后，动画效果会“冻结”着，直到文档持续时间结束或动画重新开始。
repeatCount	动画重复执行次数。
repeatDur	动画重复执行总时长。
begin	规定动画开始的时间。	`1s` ：1s 后开始执行动画。 `click` ：click 触发事件执行后再执行动画。 `click + 2s` ：click 触发事件执行后，等两秒再执行动画。
restart	规定元素开始动画后，是否可以被重新开始执行。	`always` ：动画可以在任何时候被重置。这是默认值。 `whenNotActive` ：只有在动画没有被激活的时候才能被重置，例如在动画结束之后才能再执行。 `never` ：在整个 SVG 执行的过程中，元素动画不能被重置。
calcMode	规定每一个动画片段的动画表现。	`linear` ：匀速动画，这是默认值。 `discrete` ：非连续动画，没有动画效果瞬间完成。 `paced` ：规定整个动画效果始终以相同的速度进行，设置 keyTimes 属性无效。 `spline` ：配合 keySplines 属性来定义各个动画过渡效，自定义动画。
keyTimes	划分动画时间片段。	0~1。
values	划分对应取值片段的值。

8.2 <animate>

利用 <animate> 实现一个点击触发无限往返效果

8.3 <animateTransform>

利用 <animateTransform> 实现一个点击触发水平移动效果

8.4 <animateMotion>

利用 <animateMotion> 实现一个点击触发矩形块沿路径移动的效果

原文链接：https://blog.csdn.net/weixin_64289861/article/details/128387680