4-前端数据可视化方案-SVG（二）.pdf

数据可视化SVG

刘军liujun

目录

content1渐变和滤镜

2SVG形变

3路径描边动画

4SMIL动画

5第三方动画库

6SVG动画案例

coderwhy线性渐变

◼SVG除了可以简单的填充和描边，还支持在填充和描边上应用渐变色。渐变有两种类型：线性渐变和径向渐变。

编写渐变时，必须给渐变内容指定一个id属性，use引用需用到。

建议渐变内容定义在defs标签内部，渐变通常是可复用的。

◼线性渐变，是沿着直线改变颜色。下面看一下线性渐变的使用步骤：

第1步：在SVG文件的defs元素内部，创建一个linearGradient节点，并添加id属性。

第2步：在linearGradient内编写几个stop结点。

✓给stop结点指定位置offset属性和颜色stop-color属性，用来指定渐变在特定的位置上应用什么颜色

➢offset和stop-color这两个属性值，也可以通过CSS来指定。

✓也可通过stop-opacity来设置某个位置的半透明度。

第3步：在一个元素的fill属性或stroke属性中通过ID来引用linearGradient节点。

✓比如：属性fill属性设置为url(#Gradient2)即可。

第4步（可选）：控制渐变方向，通过(x1,y1)和(x2,y2)两个点控制。

✓（0,0）（0,1）从上到下；（0,0）（1,0）从左到右。

✓当然也可以通过gradientTransform属性设置渐变形变。比如：gradientTransform=“rotate(90)”从上到下。

coderwhySVG毛玻璃效果

◼在前端开发中，毛玻璃效果有几种方案来实现：

◼方案一：使用CSS的backdrop-filter或filter属性

backdrop-filter：可以给一个元素后面区域添加模糊效果。

适用于元素背后的所有元素。为了看到效果，必须使元素或其背景至少部分透明。

filter：直接将模糊或颜色偏移等模糊效果应用于指定的元素。

◼方案二：使用SVG的filter和feGaussianBlur元素（建议少用）

filter：元素作为滤镜操作的容器，该元素定义的滤镜效果需要在SVG元素上的filter属性引用。

✓x，y,width,height定义了在画布上应用此过滤器的矩形区域。x，y默认值为-10%（相对自身）；width，height默认

值为120%（相对自身）。

feGaussianBlur：该滤镜专门对输入图像进行高斯模糊

✓stdDeviation熟悉指定模糊的程度

feOffset：该滤镜可以对输入图像指定它的偏移量。

coderwhy形变-transform

◼transform属性用来定义元素及其子元素的形变的列表。

此属性可以与任何一个SVG中的元素一起使用。如果使用了变形，会在该元素内部建立了一个新的坐标系统。

从SVG2开始，transform它是一个PresentationAttribute，意味着它可以用作CSS属性。

但是transform作为CSS属性和元素属性之间的语法会存在一些差异。

✓比如作为元素属性时：支持2D变换，不需单位，ro