Abstract: SVG is an open-standard vector graphics language that can design exciting, high-resolution Web graphics pages because the software provides tools for making complex elements, such as gradients, embedded fonts, transparency effects, animations, and filters Mirror effect and can be inserted into HTML coding using ordinary font commands.
1. Painting technique
1. canvas 位图 失真 px 2D/3D
2. svg 矢量图 2000
3. webGL 3D/2D
Second, the basic points of SVG
1. 命名空间（name space，http）：www.w3.org/2000/svg
2. 获取属性：（1）HTMLDOM获取属性:list.width
（2）核心dom的API:getAttribute()
Three, SVG dynamic creation
var rect = document.createElementNS("http://www.w3.org/2000/svg","rect"); // ***NS("命名空间")
rect.setAttribute("width",100);
rect.setAttribute("height",100);
list.appendChild(rect);
Four, SVG conventional graphics drawing
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" // 透明度
Five, SVG drawing examples
（1）SVG 绘制国际象棋棋盘
Detailed code of effect display
/* 使用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 绘制信封
Realization of effect display
<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 绘制统计图
Realization of effect display
// 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 绘制行星运动
Realization of effect display
<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绘制随机圆形
Realization of effect display
<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 ~~~~~~~~~~~~~~~~~~~
