每天10个前端知识点：HTML5(内联svg)

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

---

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

---

• H5内联SVG
  • (1) 位图 && 矢量图
  • (2) SVG使用
  • (3) SVG梗概
  • (4) SVG应用

---

14. H5内联SVG

SVG(Scalable Vector Graphic 可伸缩矢量图形)
VML(The Vector Markup Language 矢量可标记语言)

SVG 使用 XML 格式定义图形

(1) 位图 && 矢量图

• 位图 -> 由像素点构成的图形

  • 优点: 色彩信息相当复杂
  • 缺点: 失真、体积大

• 矢量图 -> 由数学语言描述出的图形

  • 优点: 体积小不失真
  • 缺点: 色彩信息单一，图形简单

(2) SVG使用

(3) SVG梗概

• 矩形
  eg:

  • x, y 位置
  • width, height 宽高
  • rx, ry 圆角矩形
  • style css属性

• 圆形
  eg:

  • cx, cy 圆心坐标 默认(0, 0)
  • r 半径

• 椭圆
  eg:

  • cx, cy 圆心坐标
  • rx, ry 水平/垂直半径

• 线
  eg:

  • x1, y1 开始坐标
  • x2, y2 结束坐标

• 折线
  eg:

  • points 每个折点的x,y坐标

• 多边形
  eg:

  • points 每个角的x,y坐标(自动闭合)

• 路径
  eg: 大写表示绝对定位，小写表示相对定位。

  • M moveto
  • L lineto
  • H horizontal lineto
  • V vertical lineto
  • C curveto
  • S smooth curveto
  • Q quadratic Belzier curve
  • T smooth quadratic Belzier curveto
  • A elliptical Arc
  • Z closepath

• 高斯滤镜 标签必须嵌套在 标签内。 definitions 定义
  eg:
  

  • id 定义名称

  • filter:url(#xxx) 链接滤镜

• 线性渐变 标签必须嵌套在 的内部。
  eg:
  

  • id 定义名称

  • x1,y1 渐变开始位置

  • x2,y2 渐变结束位置

  • 渐变颜色

  • fill:url(#xxx) 链接渐变

• 径向渐变 标签必须嵌套在 中。
  eg:
  

  • id 定义名称

  • cx,cy,r 外圈

  • fx,fy 内圈

  • 渐变颜色

  • fill:url(#xxx) 链接渐变

(4) SVG应用

纯CSS实现帅气的SVG路径描边动画效果

• stroke-dasharray 各虚线长度
• stroke-dashoffset 虚线的起始偏移

获取路径长度

2017

三个颜色变换

应用_svg 2017.gif

(5) 矢量图形库 Raphael.js

Raphaël Reference

示例

应用_svg矢量图形库 Raphael.gif

---

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故