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