12.20日总结

12.20日总结

1 SVG阴影

1.1 <defs>

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

1.2 <filter>

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

1.3 <feOffset>和<feBlend>

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

<feBlend>滤镜把两个对象组合在一起，使它们受特定的混合模式控制。类似于图像编辑软件中混合两个图层。将<feoffset>和<feBlend>结合在一起，即可创建图形的阴影效果。

1.4 <feGaussianBlur>

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

1.5 <feColorMatrix>

<feColorMatrix>滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值（一个表示为[红，绿，蓝，透明度]的矢量)都经过矩阵剩法计算出新的颜色。

2 SVG渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。sVG渐变主要有两种类型:

1. Linear:线性的。

2. Radial:径向的。

3.1 SVG 线性渐变 ：<linearGradient>

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

参数	说明
x1	渐变开始的X轴位置
x2	渐变结束的X轴位置
y1	渐变开始的y轴位置
y2	渐变结束的y轴位置

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

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

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

当x1和×2不同且y1和y2不同时，将创建径向渐变。一个渐变上的颜色坡度，是用<stop>元素定义的。

参数说明

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

3.2 SVG径向：<radialGradient>

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

参数说明：

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

4 SVG动画

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

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

SVG 动画使用方式：

1. 创建动画，告诉动画标记哪个元素需要执行动画。

2. 创建元素，在元素中说明需要执行什么动画。

4.1 SVG动画的常用属性

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

4.2 <animate>

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

需要id、attributeName、from、to、dur、begin 等属性。

4.3 <animateTransform>

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

需要attributeName、type、from、to、dur、begin、fill 等属性。

4.4 <animateMotion>

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

需要dur、path、begin、fill、rotate 等属性。

<path>元素是用来定义形状的通用元素。所有的基本形状都可以用<path>元素来创建。

M0 0是指移动到0 0的坐标位置，M是“Move to”的意思。

CO 300 300 300 300 0是指贝塞尔曲线，0 300是起点坐标，300 300是中间点坐标，300 0是终点坐标。