SVG 绘图小结

最新推荐文章于 2025-05-25 08:50:17 发布

原创最新推荐文章于 2025-05-25 08:50:17 发布 · 368 阅读

1 ·

CC 4.0 BY-SA版权

本文总结了SVG绘图技术，包括SVG的引入、动态创建、常规图形绘制（如矩形、圆形、椭圆、折线和多边形）以及实战应用，例如创建一个页面中显示50个随机颜色和大小的圆形气泡案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于前端的绘图技术我在前面的文章做过了一点解析。（Canvas绘图小结.传送门：）
三大可用绘图技术：
canvas 位图，单位是px 会师失真 2D图像和3D图形
svg 矢量图图片会尽量优化使得相对清晰
webGL 3D图像和图形
本文只要对SVG绘图技术做个小结。

一、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"); 
														 // 命名空间
	rect.setAttribute("width",100);        //设置SVG尺寸
	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绘制实例应用：

此处做一个页面中随机显示50个不同颜色不同大小气泡的案例。

创建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)
		}

创建50个圆形泡泡，并设定随机事件，给泡泡设置随机大小及随机颜色

	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>