| 目录 |
1.什么是SVG
2.绘制图形——矩形元素
3.绘制图形——圆形元素
4.绘制图形——椭圆元素
5.绘制图形——线条元素
6.绘制图形——折线元素
7.绘制图形——多边形元素
8.特效元素——渐变元素
9.特效元素——滤镜元素
10.绘制图片
11.画布方法
12.two.js
| 1.什么是SVG |
SVG（Scalable Vector Graphics）是一种使用XML技术描述的二维图形语言，矢量图（不会失真）
SVG标准由W3C制定，可参考：http://www.w3school.com.cn/svg/svg_reference.asp
SVG可以使用三种方式描述二维图形：
- 矢量图：例如直线或曲线构成的路径
- 图片
- 文本
SVG与HTML5的关系：
- 早在HTML5之前，就存在SVG技术
- SVG文件扩展名为.svg
- 在H5之前，要在HTML页面中引入SVG文件，而HTML5之后，将SVG内容直接定义在HTML页面中
SVG的优势：
- 可以使用文本编辑器创建和修改
- SVG可被搜索、索引等
- SVG绘制的图像不失真
SVG与Canvas的区别：
- SVG不依赖于分辨率，但是Canvas依赖于分辨率
- Canvas不能使用DOM或绑定事件，但是SVG可以
- Canvas运行时以图片形式出现，SVG不是
- Canvas可实现网页游戏，SVG不能，但是可用于带有大型渲染区域的应用（如地图类）
| 2.绘制图形——矩形元素 |
rect元素
<rect x="100" y="100" width="100" height="100" />
x和y表示绘制矩形的左上角坐标值
width和height表示宽度和高度
属性：
- fill：填充
- fill-opacity：填充透明度（0-1）
- stroke：描边
- stroke-width：边框宽度
- rx和ry：圆角，r是半径，两个一起用
transform属性：
用于设置转换效果
方法：
- rotate()
- scale()
- translate()
注意：
SVG在绘制图形时，可以使用单标签或起始标签，但是单标签必须有结束符“/”
属性可以用元素的属性方式，也可以用CSS方式来设置，但是原CSS中样式不能使用
效果图：
完整代码：
<!doctype html>
<html lang="lang">
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
