css svg做动图,【SVG】基本图形 —— 制作自己的SVG动态图标

本文章假设读者对SVG有基础的了解。

属性

width

元素的宽度

height

元素的高度

fill

为闭合图形填充颜色

fill-opacity

填充颜色的透明度

stroke

为线条添加颜色

stroke-width

线条宽度

stroke-opacity

线条透明度

stroke-linecap

线条终点的样式，支持三个值：butt(默认),square,round。

stroke-linejoin

线条转折点的连接样式，支持三个值：miter(默认),round,bevel。

stroke-dasharray

用逗号分隔的一组数字，表示虚线中实线段的长度。

stroke-dashoffset

支持百分比和数值，表示dash模式到路径开始的距离。

元素

x矩形左上角的x位置

y矩形左上角的y位置

width宽度

height高度

rx圆角的x方位的半径

ry圆角的y方位的半径

r圆形半径

cx圆心的x位置

cy圆心的y位置

rx椭圆的x半径

ry椭圆的y半径

cx椭圆中心的x位置

cy椭圆中心的y位置

x1线条起点的x位置

y1线条起点的y位置

x2线条终点的x位置

y2线条终点的y位置

points折线的折点

exam:

points多边形的折点

exam:

d“路径命令+参数”的序列，大写命令表示采用绝对定位，小写命令表示采用相对定位。

M(m) x y指定路径的起点

L(l) x y指定路径直线的终点

H(h) x指定路径水平直线终点的x

V(v) y指定路径垂直直线终点的y

Z(z)没有参数，闭合路径

A(a) rx ry x-axis-rotation large-arc-flag sweep-flag x y绘制弧形。弧形可以视为圆形或椭圆形的一部分。

rx椭圆的x半径

ry椭圆的y半径

x-axis-rotation椭圆x轴的旋转角度

large-arc-flag0表示小角度弧，1表示大角度弧。

sweep-flag0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。

x弧形终点的x位置

y弧形终点的y位置

控制点描述的是曲线始终点的斜率。贝塞尔曲线是从起点斜率到终点斜率的渐变弧线。

C(c) x1 y1, x2 y2, x y描绘三次贝塞尔曲线。6个参数分别是始终点的控制点位置和曲线终点位置。

S(s) x2 y2, x y描绘光滑三次贝塞尔曲线。

Q(q) x1 y1, x y描绘二次贝塞尔曲线。4个参数分别是控制点位置和曲线终点位置。

T(t) x y描绘光滑二次贝塞尔曲线。

文本

分组

引用

transform

transform属性为元素变形，目前仅支持2维变形。默认都是以SVG原点为基点对元素进行变形，对于单个元素的简单变形，可以通过viewBox改变原点的方式校正。

translate

translate(x[,y])平移，支持百分比和数值。

rotate

rotate(angle[, x y])旋转，以x和y的位置为中心旋转。

scale

scale(x[, y])缩放。

skewX,skewY

skewX(angle),skewY(angle)斜切

matrix

通过矩阵实现复杂变形

CSS方法

通过css只能控制一部分svg属性。

svg中引用样式

css中控制样式

//svg

//css

#MyRect {

fill: red;

stroke: black;

}

css3渐变

//svg

//css

#myLine {

stroke-width: 50;

transition: all 5s;

}

#myLine:hover {

stroke-width: 100;

}

css3动画

//svg

//css

#myLine:hover{

animation: lineAnimate 2s;

}

@keyframes lineAnimate {

to {

stroke-width: 100;

}

}

JavaScript方法

document.creatElementNS(ns, tagName)创建svg元素，ns为命名空间：svg元素的命名空间是：http://www.w3.org/2000/svg；如果使用引用xlink，需添加xlink的命名空间：http://www.w3.org/1999/xlink。

element.appendChild(childElement)添加子元素。

element.setAttribute(name, value)设置元素属性和值。

element.getAttribute(name)获取元素属性值。

path.getTotalLength()获取路径长度。

requestAnimationFrame(update)请求动画帧，接受一个回调函数，用来更新画面。下面是一个使用requestAnimationFrame(update)的例子：

//svg

//javascript

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

(function() {

var line = document.getElementById("line");

var lastTime = +new Date();

function update() {

var curY2 = Number(line.getAttribute("y2"));

var curTime = +new Date();

var _time = curTime - lastTime;

if (curY2 < 400) {

line.setAttribute('y2', curY2 + _time / 5);

} else if (curY2 > 400) {

line.setAttribute('y2', 400);

} else {

return false;

}

lastTime = +new Date();

requestAnimationFrame(update);

}

window.update = update;

})();

requestAnimationFrame(update);

使用requestAnimationFrame(update)可以制作简单的SVG动态图标。

不建议使用SVG animation with SMIL。在写这篇文章的时候，使用,等元素会在chrome控制台中显示SVG's SMIL animations are deprecated and will be removed. Please use CSS animations or Web animations instead.。