12.20知识点梳理

svg

svg阴影

<defs>

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

<filter>

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

<feOffset><feBlend>

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

<feBlend>滤镜把两个对象组合在一起，使他们受特定的混合模式控制。

<feGaussianBlur>

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

<feColorMatrix>

<feColorMatrix>滤镜基于转换矩阵对颜色进行变换。

svg渐变

渐变主要有两种类型：

Linear：线性的。

Radial：径向的。

svg线性渐变：<linearGradient>

 

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

一个渐变上的颜色坡度，是用<stop>元素定义的。

svg径向渐变：<radialGradient>

 

<radialGradient>元素用来定义径向渐变，用于图形元素的填充或描边。

svg动画

<animate>动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时间点改变。在指定持续时间里，属性从开始值变成结束值。

<animateTransform>实现一个点击出发左右移动效果。

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

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

svg动画常用属性

attributename，from，to，dur，fill，repeatcount，repeatdur，begin，restart，calcmode，keytimes，values