SVG——可扩展适量图形，基于XML

PC端：IE9+   wap端：表现良好，适合使用

基础图形：

line（线段）  <line x1="25" y1="150" x2="375" y2="50" stroke="#f00"></line>

polyline（折线） <polyline points="250 75,350 100,100 0" stroke="#1A9EF2" fill="none"></polyline>

circle（圆）   <circle cx="135" cy="35" r="20" style="stroke: none;fill: #ddd;"></circle>

rect（矩形）   <rect x="10" y="10" rx="10" ry="10" width="50" height="60" style="stroke: #ccc;fill:#add;"></rect>

polygon（多边形） <polygon points="400 400,450 480,600,100,550 80"></polygon>

ellipse（椭圆）  <ellipse cx="200" cy="500" rx="72" ry="45"></ellipse>

 

组标签：

<g fill="dodgerblue">

     <rect x="510" y="10" width="40" height="40" ry="10"/>

     <rect x="610" y="80" width="40" height="40" ry="10" />

     <rect x="710" y="150" width="40" height="40" ry="10" />

</g>

 

a链：

<a xlink:href="http://sina.com.cn" target="_blank">

      <text x="10" y="130" style="fill: red;">Hello World!!</text>

</a>

 

路径标签：（M——移动 L——线段 H——水平线段  V——垂直线段  A——圆弧  C——三次贝塞尔曲线   S——特殊版本的三次贝塞尔曲线   Q——二次贝塞尔曲线    T——特殊版本的二次贝塞尔曲线   Z——闭合）

<path d="M 60 0 L 120 0 L 180 60 L180 120 L120 180 L 60 180 L 0 120 L 0 60" transform="translate(500,500)"></path>

 

svg嵌入页面的方式：img、background、iframe、embed、object、直接使用svg标签嵌入

 

svg生成工具软件：Adobe Illustrator、SVGDeveloper

 

path的两个css属性：

stroke-dasharray     /*两个参数：线段长度 线段缝隙*/

stroke-dashoffset  /*从哪个位置开始渲染线段*/

 

获取path长度的js api：  getTotalLength方法

 

通过改变path的两个属性，实现一个动画的效果：