SVG小图标

我们现在使用SVG更多是在绘制小图片icon 因为它强大的功能以及不失真的特点 下面上代码画一个导航栏和小信封

---

导航栏

for(var i=1; i<4; i++){
   	//循环三次分别画三个圆和三个圆角矩形
   	var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
	circle.setAttribute('r', 10);
	circle.setAttribute('cx', 50);
	circle.setAttribute('cy', i*30);
	circle.setAttribute('fill', "#343D46");
	s1.appendChild(circle);

	var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
	rect.setAttribute('width', 80);
	rect.setAttribute('height', 20);
	rect.setAttribute('x', 70);
	rect.setAttribute('y', i*30-10);
	rect.setAttribute('rx', 8);
	rect.setAttribute('ry', 8);
	rect.setAttribute('fill', "#343D46");
	s1.appendChild(rect);
}

信封

		//我们先把信封当做一个整体画一个圆角矩形
		var rect1 = document.createElementNS('http://www.w3.org/2000/svg','rect');
		rect1.setAttribute('width', 100);
		rect1.setAttribute('height', 75);
		rect1.setAttribute('x', 300);
		rect1.setAttribute('y', 50);
		rect1.setAttribute('rx', 15);
		rect1.setAttribute('ry', 15);
		rect1.setAttribute('fill', "#3C5872");
		s1.appendChild(rect1);
		//用一条折现分割信封
		var polyline = document.createElementNS('http://www.w3.org/2000/svg','polyline');
		polyline.setAttribute('points',"300,50 350,85 400,50");
		polyline.setAttribute('stroke',"#f0f0f0");
		polyline.setAttribute('stroke-width',"7");
		//为折现设置圆角
		polyline.setAttribute('stroke-linecap','round');
		//设置折现区域的颜色与其他部分颜色统一
		polyline.setAttribute('fill',"#3C5872");
		s1.appendChild(polyline);

---

如有错误，请指正!