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>
结果: