摘要：SVG是一种开放标准的矢量图形语言，可设计激动人心的、高分辨率的Web图形页面，因为软件提供了制作复杂元素的工具，如渐变、嵌人字体、透明效果、动画和滤镜效果并且可使用平常的字体命令插人到HTML编码中。
一、绘画技术
1. canvas 位图 失真 px 2D/3D
2. svg 矢量图 2000
3. webGL 3D/2D
二、SVG基础要点
1. 命名空间（name space，http）：www.w3.org/2000/svg
2. 获取属性：（1）HTMLDOM获取属性:list.width
（2）核心dom的API:getAttribute()
三、SVG动态创建
var rect = document.createElementNS("http://www.w3.org/2000/svg","rect"); // ***NS("命名空间")
rect.setAttribute("width",100);
rect.setAttribute("height",100);
list.appendChild(rect);
四、SVG常规图形绘制
1.绘制矩形：
<rect width="300" height="200" x="300" y="200"></rect>
2.绘制圆形：
<circle cx="100" cy="100" r="100"></circle>
3.绘制椭圆：
<ellipse cx="200" cy="150" rx="100" ry="200"></ellipse>
4.折线：
<line x1="100" y1="100" x2="600" y2="400"></line>
5.多边形：
<polyline points="50,100 100,200 200,350 250,300"></polyline>
// polygon:标签用来创建不少于三个边的图形
6.常用属性：
fill="white" // 填充色
stroke="green" // 边框色
stroke-width="5" // 边框宽度
fill-opacity="0" // 透明度
五、SVG绘图实例
（1）SVG 绘制国际象棋棋盘
效果展示
详细代码
/* 使用svg矩形绘制国际象棋棋盘， HTML标签/js动态创建rect标签 */
// html 部分
<svg width="800" height="800" id="list"></svg>
// JS部分
/************** 绘制棋盘方案一 **********************/
var flag = true;
for(var i=0;i<8;i++){
for(var j =0;j<8;j++){
var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
rect.setAttribute("width",100);
rect.setAttribute("height",100);
rect.setAttribute("x",i*100);
rect.setAttribute("y",j*100);
if(flag){
rect.setAttribute("fill","#fff");
}else{
rect.setAttribute("fill","#000");
}
list.appendChild(rect);
flag = !flag;
}
flag = !flag;
}
/************** 绘制棋盘方案二 **********************/
var svg = document.getElementsByTagName("svg")[0];
var x = 0, y = 0;
for(var i = 0; i < 8; i++){
for(var j = 0; j < 8; j++){
var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");;
if(i % 2 == 0){
j % 2 == 0 ? setAttElem("#000", "#000") : setAttElem("#FFF", "#FFF");
} else {
j % 2 == 0 ? setAttElem("#FFF", "#FFF") : setAttElem("#000", "#000");
}
svg.appendChild(rect);
}
}
function setAttElem (item, tmp) {
rect.setAttribute("width", 99);
rect.setAttribute("height", 99);
rect.setAttribute("x", j * 100);
rect.setAttribute("y", i * 100);
rect.setAttribute("stroke", item);
rect.setAttribute("fill",tmp);
}
（2）SVG 绘制信封
效果展示
实现方式
<svg width="600" height="400" id="svg_02">
<polygon points="100,120 300,220 500,120"></polygon>
<polygon points="100,130 100,300 500,300 500,130 300,250"></polygon>
</svg>
（3）SVG 绘制统计图
效果展示
实现方式
// html 部分
<svg width="800" height="500" id="s1">
<g stroke="#555" stroke-width="2" id = "svg_03">
<!--x轴-->
<line x1="50" y1="450" x2="650" y2="450"></line>
<line x1="630" y1="440" x2="650" y2="450"></line>
<line x1="630" y1="460" x2="650" y2="450"></line>
<!--Y轴-->
<line x1="50" y1="450" x2="50" y2="50"></line>
<line x1="40" y1="70" x2="50" y2="50"></line>
<line x1="60" y1="70" x2="50" y2="50"></line>
</g>
</svg>
// JavaScript 部分
var data = [
{"lable":"部门1","value":250},
{"lable":"部门2","value":470},
{"lable":"部门3","value":200},
{"lable":"部门4","value":180},
{"lable":"部门5","value":100},
{"lable":"部门6","value":340},
]
for(var i=0; i<data.length; i++){
var Orect=document.createElementNS('http://www.w3.org/2000/svg','rect');
Orect.setAttribute('width',50);
Orect.setAttribute('height',data[i].value);
Orect.setAttribute('x',(i+1)*80);
Orect.setAttribute('y',s1.getAttribute("height") - 50 - data[i].value);
svg_03.appendChild(Orect);
}
（4）SVG 绘制行星运动
效果展示
实现方式
<script type="text/javascript" src="two.js"></script> // 引入 two.js
// html 部分
<div id="draw-shapes"></div>
// JavaScipt 部分
var elem = document.getElementById('draw-shapes');
var two = new Two({width: 600, height: 600, type: Two.Types.svg}).appendTo(elem);
// 太阳
var sun = two.makeCircle(300, 300, 80);
sun.fill = '#FC640E';
sun.noStroke();
// 太阳轨道
var sunTrack = two.makeCircle(300, 300, 220);
sunTrack.stroke = '#ddd';
sunTrack.noFill();
// 地球 以sun为圆心
var earth = two.makeCircle(0, 0, 30);
earth.fill = '#2C7CFF';
earth.noStroke();
// 地球轨道 以sun为圆心
var earthTrack = two.makeCircle(0, 0, 60);
earthTrack.stroke = '#ddd';
earthTrack.noFill();
// 月球 以地球为圆心
var moon = two.makeCircle(60, 0, 5);
moon.fill = '#757B81';
moon.noStroke();
// 地月系
var mGroup = two.makeGroup(earth, earthTrack, moon);
mGroup.translation.set(220, 0); // 偏移位置相对于后面的地球组进行定位
// 太阳系
var eGroup = two.makeGroup(mGroup); // 月球组, 而不是单个月球
eGroup.translation.set(300, 300);
two.bind('update', function() {
mGroup.rotation += 1* Math.PI/180; // 必须使用+= 每次旋转 1°
eGroup.rotation += 1*Math.PI/180;
}).play(); // .play()方法开启动画循环
two.update();
（5）使用svg绘制随机圆形
效果展示
实现方式
<svg width="600" height="400" id="svg1"></svg>
<script>
for(var i =0;i<50;i++){
var c = document.createElementNS("http://www.w3.org/2000/svg","circle");
c.setAttribute("fill",rc(0,256));
c.setAttribute("cx",rn(0,600));
c.setAttribute("cy",rn(0,400));
c.setAttribute("r",rn(5,50));
c.setAttribute("fill-opacity",Math.random());
svg1.appendChild(c)
}
svg1.onclick = function(e){
var target = e.target;//事件源对象
if(target.nodeName == "circle" && !target.getAttribute("data-animte") ){
var timer = setInterval(function(){
target.setAttribute("data-animte",true);//自定义属性,定时器没关
//半径变大
var r = target.getAttribute("r");
r = parseFloat(r);
r *=1.2;
target.setAttribute("r",r);
//透明度变淡
var p = target.getAttribute("fill-opacity");
p = parseFloat(p);
p *=0.8;
target.setAttribute("fill-opacity",p);
//在几乎看不及时。删除圆
if(p < 0.1){
clearInterval(timer);
svg1.removeChild(target);
}
},50)
}
}
//随机颜色
function rc(min,max) {
var r = rn(min,max);
var g = rn(min,max);
var b = rn(min,max);
return "rgb("+ r +","+ g +","+ b +")";
}
//随机位置
function rn(min,max){
return a = Math.floor(Math.random()*(max-min)+min);
}
</script>
~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~
