svg置入HTML页面方式：

1、直接写入

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>

</svg>

 

2、embed

  • 优势：所有主要浏览器都支持，并允许使用脚本
  • 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

　　<embed src="http://www.runoob.com/try/demo_source/polygon3.svg" type="image/svg+xml"></embed>

 

3、object

  • 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
  • 缺点：不允许使用脚本。

　　<object data="http://www.runoob.com/try/demo_source/polygon3.svg" type="image/svg+xml"></object >

 

4、iframe

  • 优势：所有主要浏览器都支持，并允许使用脚本
  • 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

　　<iframe src="http://www.runoob.com/try/demo_source/polygon3.svg"></iframe>

 

5、img

　　<img src="http://www.runoob.com/try/demo_source/polygon3.svg"></img>

 

6、js动态创建svg元素

　　6.1.用document.createElement创建出来的节点是属于html dom，而svg的节点是svg dom。需要用createElementNS函数并传入节点名称的命名空间。

　　6.2.动态创建svg:

　　　　var svgDom = document.createElementNS('http://www.w3.org/2000/svg','svg');

　　　　svgDom.setAttribute('width','1000');

　　　　svgDom.setAttribute('height','1000');

　　　　document.body.appendChild(svgDom);

　　6.3.动态创建svg的形状元素，比如 创建一个三角形

　　　　var polygonDom = document.createElementNS('http://www.w3.org/2000/svg'，'polygon');

　　　　polygonDom.setAttribute('points','200,60 240 ,60 220,80');

　　　　polygonDom.setAttribute('style','fill:black;strock:#ccc;stroke-width:1;');

　　　　svgDom.appendChild(polygonDom);

 

7.svg image标签降级兼容处理

　　所有浏览器，包括IE，会把image标签渲染成img标签。

　　<svg width="100" height="100"> <image xlink:href="svg.svg" src="svg.png" width="100" height="100" /> </svg>

 

  绘制基础图形

<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g>辅助分组

直线：<line id="line1" x1="50" y1="100" x2="450" y2="200" /><line></line>直线

矩形：<rect id="rect1" width="200" height="100" x="50" y="50" rx="30" ry="10" />

圆形：<circle id="cir1" r="100" cx="150" cy="150" stroke-width="3" stroke="#999" fill="none" />

椭圆：<ellipse id="ellipse1" cx="200" cy="100" rx="100" ry="50" />

折线：<polyline id="polyline1" points="50,50 100,100 150,50 200,300 50,50" style="stroke-width: 3; stroke: #333; fill: #ffc;" />

多边形：<polygon id="ploygon1" points="10,10 10,100 50,250 150,150 100,300 120,50 200,300" />

插入图片方式，注意生命xlink：<image xlink:href="src" />

</g> 

<g>

　　路径，可绘制以上所有图形：<path id="path3" width="200" height="100" d="M60 60 L100 100 Q130 20 250 200" />

</g> 

</svg>

<!-- path 路径参数：命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
M = moveto //起始点x,y
L = lineto //直线-连接点x,y
H = horizontal lineto //直线-水平连接，x
V = vertical lineto //直线-垂直连接，y
Z = closepath //闭合标志，起始点与结束点闭合

C = curveto //三次贝塞尔曲线：x1 y1 x2 y2 x y
S = smooth curveto //光滑三次贝塞尔曲线：x2 y2 x y
Q = quadratic Bézier curve //二次贝塞尔曲线：x1 y1 x y
T = smooth quadratic Bézier curveto //光滑二次贝塞尔曲线：x y
A = elliptical Arc //椭圆弧：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
R = Catmull-Rom curveto* //Catmull-Rom曲线：x1 y1 (x y)+
-->