爱站程序员基地SVG简介
SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,本质上是文本文件，体积较小，放大多少都不会失真。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。
svg的引入
- 直接放在页面中
- 利用img标签
- 利用iframe标签
- 利用object标签
- 利用embed标签
例子：
<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><title></title></head><body>//直接复制放入省略<img src=\"img/mail.svg\" /><iframe src=\"img/mail.svg\" width=\"200\" height=\"200\" style=\"border: none;\"></iframe><object data=\"img/mail.svg\" type=\"image/svg+xml\"></object><embed src=\"img/mail.svg\" type=\"image/svg+xml\"></embed></body></html>
结果：
svg的语法
svg的写法：
例子：
<svg width=\"100%\" height=\"100%\"><circle id=\"c1\" cx=\"50\" cy=\"50\" r=\"50\"></circle></svg>
运行结果：
- svg的图像默认大小是300*150（像素）。
- 如果只想展示svg图像的一部分要指定viewBox属性。
例子：
<svg width=\"100\" height=\"100\"><circle id=\"c1\" cx=\"50\" cy=\"50\" r=\"50\" ></circle></svg><hr ><svg width=\"100\" height=\"100\" viewBox=\"50 50 50 50\"><!-- 前面是左上角坐标，后面是切出来的宽高 --><circle id=\"c1\" cx=\"50\" cy=\"50\" r=\"50\" ></circle></svg>
结果：
circle标签
//cx是圆心的x轴坐标，cy是圆心的y轴坐标，r是半径,相对于svg画布上的左上角原点<circle id=\"c1\" cx=\"50\" cy=\"50\" r=\"50\" ></circle>
svg的css属性
fill：填充色
stroke:描边色
stroke-width:边框宽度
例子：
<style type=\"text/css\">.red{fill: #FF0000;}.blue{fill: skyblue;stroke: #FF0000;stroke-width: 5px;}</style><svg width=\"500\" height=\"500\"><circle id=\"c3\" cx=\"50\" cy=\"50\" r=\"50\" fill=\"orange\" ></circle><circle id=\"c4\" cx=\"200\" cy=\"50\" r=\"50\" class=\"red\"></circle><circle id=\"c5\" cx=\"350\" cy=\"70\" r=\"50\" class=\"blue\"></circle></svg>
结果：
line标签
x1,y1是线段起始点坐标，x2,y2是线段终点坐标。
例子：
<svg width=\"500\" height=\"500\"><line x1=\"50\" y1=\"50\" x2=\"200\" y2=\"200\" style=\"stroke: blueviolet;stroke-width: 5px;\"></line></svg>
结果：
polyline标签
折线标签使用格式：
point中的就是各个点坐标
<polyline points=\"50,100 50,300 350,300\" style=\"stroke: aquamarine;stroke-width: 5px; fill: none;\"></polyline>
结果：
rect标签
格式：x,y左上角端点的横纵坐标，width和height指定宽度和高度（像素）
.rect{fill: aquamarine;stroke: #8A2BE2;stroke-width: 5px;}<svg width=\"500\" height=\"500\"><rect x=\"50\" y=\"50\" width=\"250\" height=\"250\" class=\"rect\"></rect></svg>
结果：
ellipse椭圆标签
<style type=\"text/css\">.ell{fill: aquamarine;stroke: #8A2BE2;stroke-width: 5px;}</style><svg width=\"500\" height=\"500\"><ellipse cx=\"200\" cy=\"200\" rx=\"100\" ry=\"50\" class=\"ell\"></ellipse></svg>
polygon多边形标签
points是按顺序连接的端点的坐标
<style type=\"text/css\">polygon{fill: aquamarine;stroke: #8A2BE2;stroke-width: 5px;}</style><svg width=\"500\" height=\"500\"><polygon points=\"50,50 350,10 350,350 50,350 \"></polygon></svg>
结果：
path标签
绘制路径M是起点，L是中间点，Z表示闭合
path{stroke: #8A2BE2;stroke-width: 5px;fill:none;}<svg width=\"600\" height=\"600\"><path d=\"M 50,50 L 100,60 L 200,160 L 250,300 L 450,450 Z\"></path></svg>
结果：
text标签
x,y属性表示文本区块基线起点的横坐标和纵坐标。【注意】字体颜色用fill进行填充
格式：
<style type=\"text/css\">text{fill: slateblue;font-size: 50px;font-weight: 600;stroke: #7FFFD4;stroke-width: 2px;}</style><text x=\"200\" y=\"300\">这是一个文本内容</text>
结果：
use标签
用于复制一个形状。设置的x,y是相对于被复制的形状的坐标
格式：
<svg width=\"600\" height=\"600\"><circle id=\"c1\" cx=\"50\" cy=\"50\" r=\"50\" fill=\"orange\" ></circle><use href=\"#c1\" x=\"200\" y=\"200\"></use></svg>
结果：
g标签
将多个形状组成一个组。
<svg width=\"600\" height=\"600\"><g id=\"g1\"><circle id=\"c1\" cx=\"50\" cy=\"50\" r=\"50\" fill=\"skyblue\" ></circle><circle id=\"c2\" cx=\"150\" cy=\"50\" r=\"50\" fill=\"blue\" ></circle><circle id=\"c2\" cx=\"250\" cy=\"50\" r=\"50\" fill=\"black\" ></circle></g><use href=\"#g1\" x=\"0\" y=\"200\"></use></svg>
结果：
defs标签
用于自定义形状，它内部的代码不会显示，仅仅供引用。下列例子上面的图形不会再显示。。
<defs><g id=\"g1\"><circle id=\"c1\" cx=\"50\" cy=\"50\" r=\"50\" fill=\"skyblue\" ></circle><circle id=\"c2\" cx=\"150\" cy=\"50\" r=\"50\" fill=\"blue\" ></circle><circle id=\"c2\" cx=\"250\" cy=\"50\" r=\"50\" fill=\"black\" ></circle></g></defs><use href=\"#g1\" x=\"0\" y=\"200\"></use>
pattern标签
用于自定义一个形状，该形状可以来平铺一个区域
格式：
<svg width=\"500\" height=\"500\"><defs><pattern id=\"dots\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle id=\"c1\" cx=\"50\" cy=\"50\" r=\"50\" fill=\"skyblue\" ></circle></pattern></defs><rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#dots)\"></rect></svg>
结果：
image标签
一般不进行这个操作。
格式
<svg width=\"500\" height=\"500\"><image xlink:href=\"img/image4.jpg\" width=\"100%\" height=\"100%\" /></svg>
放大了会失真
animate标签
产生动画效果
<svg width=\"600\" height=\"600\"><rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" fill=\"skyblue\"><animate attributeName=\"x\" from=\"0\" to=\"500\" dur=\"2s\" repeatCount=\"indefinite\"></animate></rect></svg>
结果：不停运动
animateTransform标签
例子：
from和to有三个属性值第一个是角度值，第二个和第三个是旋转中心坐标。
例子表示，开始时绕着（200,200）旋转，结束时绕着（400,400）旋转角度为360。边旋转边移动。
<svg width=\"1000\" height=\"1000\"><rect x=\"100\" y=\"100\" width=\"100\" height=\"100\" fill=\"skyblue\"><animateTransform attributeName=\"transform\" type=\"rotate\" begin=\"0s\" dur=\"10s\" from=\"0 200 200\" to=\"360 400 400\" repeatCount=\"indefinite\"></animateTransform></rect></svg>
结果：
