js学习20-（svg）

SVG

svg简介

SVG指可伸缩矢量图形 (Scalable Vector Graphics)；

SVG是使用 XML 来描述二维图形和绘图程序的语言、是可伸缩的、是万维网联盟的标准、是开放的标准。

SVG与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

SVG文件是纯粹的 XML，可被非常多的工具读取和修改（比如记事本）

SVG用来定义用于网络的基于矢量的图形，使用 XML 格式定义图形，
​ 图像在放大或改变尺寸的情况下其图形质量不会有所损失，
​ 图像可在任何的分辨率下被高质量地打印，图像中的文本是可选的，
​ 同时也是可搜索的（很适合制作地图）；

SVG与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体，可以与 Java 技术一起运行；

SVG有一些预定义的形状元素，可被开发者使用和操作：

• 矩形
• 圆形
• 椭圆
• 线
• 折线
• 多边形
• 路径

svg的使用方式：

1、svg文件可以直接插入到网页中，称为DOM的一部分，然后使用js和css进行操作。

2、svg代码可以写在一个独立文件中，然后用“img/object/iframe/embed”标签插入到网页中

3、css可以直接使用svg文件。

4、svg还可以转为BASE64编码，作为Data url写入网页中。

SVG语法

1、svg标签

svg代码都写在顶层标签

<svg width="100" height="100" viewBox="50 50 50 50">
		<circle id="myCircle" cx="100" cy="100" r="50"/>
</svg>

​ svg中的width和height属性制定了svg图像在html元素中所占的宽度和高度。既可以采用相对单位，也可以采用绝对定位。若不指定这两个属性，则svg图像默认大小是300px(宽)*150px(高)。

​ viewBox属性：该属性有四个属性值，分别表示左上角的横坐标和纵坐标、视窗的高度和宽度。

​ 注意：视口必须适配所在的空间。上面例子中，视口的大小是5050，由于svg图像的大小是100100，则视口会放大去适配svg图像的大小，即放大了四倍。

​ 若svg中不指定width、height属性，只指定viewBox属性，则相当于只给定svg图像的长宽比，此时svg图像的默认大小将等于所在的html元素的大小。

2、circle标签

标签代表的是圆形

<svg width="100" height="100" viewBox="50 50 50 50">
		<circle id="myCircle" cx="100" cy="100" r="50"/>
</svg>

属性：

​ cx：圆心的横坐标。

​ cy：圆心的纵坐标。

​ r：圆的半径

​ 也可以设置class和id，便于在css中设定样式。

svg在css属性：

​ fill：填充色

​ stroke：描边色

​ stroke-width：边框宽度

3、line标签

标签用来绘制直线

<svg width="200" height="200" >
		<line id="myLine" x"0" y1="0" x2="200" y2="200" style="stroke: #FF0000; stroke-width: 2px;"/>
</svg>

属性：

​ x1和y1：代表的是line起点的横纵坐标。

​ x2和y2：代表的是line终点的横纵坐标。

​ style：代表的是line的样式

4、polyline标签

标签用于绘制折线

<svg width="200" height="200" >
		<polyline id="mypolyLine" points="3,3 20,15 52,100 40,189" fill="none" styl