SVG笔记

SVG 已经不是什么新鲜技术了，天猫也即将不支持IE8.所以SVG在今后的使用场景肯定会更加广泛。之前用SVG实现一个环形统计图，比用canvas渲染的图表性能更好。下面对一些SVG的知识点进行整理，以便今后使用查阅方便。

零、SVG简介

SVG 即 Scalable Vector Graphics (可伸缩矢量图形)
优点
- 可以随意放大或改变尺寸, 同时其图形质量不会有损失
- 比JPEG和GIF尺寸更小
- 图像中文本可选可搜索
- 能在任何分辨率下被高质量打印
- 开放, 兼容, 易读取
SVG 可以单独作为一个文件书写, 在这里只介绍编写在HTML里的SVG

一、SVG 标签

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    {some svg code}
</svg>

上面是一个svg基础标签, 任何svg的代码都需要包裹在这个标签中。

在现代浏览器中, svg标签的xmlns属性和version属性都可以省略。

svg 标签默认的宽高是 300 * 150 , 如果不设置width和height属性, SVG图像就在这个尺寸的画布中绘制。

二、SVG 元素

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
文本 <text>

三、SVG 元素属性

下面用表格的形式对一些常见的元素属性进行这里：

属性描述	属性名	属性值	备注
位置	`x` `y` (矩形位置)	相对于svg标签的绘制区域的左侧和顶端距离。类似于css中的top和left属性。	位置的属性是将元素的内容区域进行定位（边框是不属于内容区域的，这一点需要注意）
	`cx` `cy` (圆形位置)	圆形坐标。默认值为（0，0）
	`x1` `x2` `y1` `y2` (直线开始和结束的位置)
尺寸	`width` `height` (矩形尺寸)	同css中width和height的值可以直接为数字（相当于px) 使用em和rem效果似乎是一样的百分比为单位时，是相对于svg标签的尺寸
	`r` (圆形半径)
	`rx` `ry` (椭圆的水平、垂直半径)
圆角	`rx` `ry`	同css中
多边形、曲线	`points`	字符串，包含至少三个坐标值，用空格分割。如`points="200,10 250,190 160,210"`
变换	`transform`	translate（位移） rotate（旋转） scale（缩放） skew（斜切）	一切尽在这里
以下属性需要写在style属性中, 如 `<rect x=1 y=1 height＝"100px" width=10 style="下面的属性" />`
填充	`fill-rule` (填充规则)	nonzero(默认值) evenodd inherit
	`fill-opacity` (填充透明度)
	`fill` (填充颜色)	颜色同css中，颜色名，十六进制，rgb(a)等等
描边(边框、直线)属性	`stroke` (颜色)	颜色同css中，颜色名，十六进制，rgb(a)等等	关于stroke及其他的属性，张鑫旭大神有一篇博文介绍
	`stroke-opacity` (透明度)		关于stroke及其他的属性，张鑫旭大神有一篇博文介绍
	`stroke-width` (宽度)		矩形边框的宽度不属于元素的宽高
	`stroke-dasharray` (用于创建虚线)	指定一个虚线规则的数组，偶数项为实体宽度，奇数项为空白宽度。之后一直循环这个数组，形成一个虚线	需要渲染大量环形图表，用echart会很卡，用SVG的这个属性就很轻松的实现了，也是张大神的文章——小tip: 使用SVG寥寥数行实现圆环loading进度效果
透明度	`opacity` (元素透明度)	同css中，范围为0-1	显而易见，设置了opacity属性，也就同时设置了fill-opacity和stroke-opacity属性
	`fill-opacity` (填充透明度)
	`fill` (填充颜色)

后记

以上便是一些SVG的基本知识，以及部分关于SVG的好文章。后面有更深入的了解时再加进来。

SVG很强大～

Contents

零、SVG简介

一、SVG 标签

二、SVG 元素

三、SVG 元素属性

后记