SVG绘画 入门基操

最新推荐文章于 2024-05-10 11:19:31 发布
最新推荐文章于 2024-05-10 11:19:31 发布
阅读量829 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CodingmanNAN/article/details/103665726
版权

摘要：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 ~~~~~~~~~~~~~~~~~~~

116：vue+leaflet 使用SVGOverlay来加载svg文件
大剑师兰特的GIS世界
03-17 675
第116个本示例的目的是介绍演示如何在vue+leaflet中添加svg图片，这里使用SVGOverlay来做载体加载svg文件。
html5css3svg画图,欣赏18种超级有趣的SVG绘图
weixin_30780735的博客
06-27 1485
SVG作为当今相对较新的技术标准，已经建立了许多基于SVG的前端项目. 由于SVG在绘制路径上非常灵活，因此我们使用SVG在网页上绘制许多元素，包括各种字符，小图标，小等. 今天，我们已经收集了18种非常新颖和有趣的SVG绘图. 这些大多数是使用SVG与某些CSS3功能结合实现的. 效果非常令人震惊. 让我们看一下.1. HTML5 SVG实现了跳舞花的4种跳舞心情这是另一个非常有趣的HTML5...
SVG绘画
Brgen的博客
03-09 292
svg绘画基本概念
svg图形的绘制
sh2001824的博客
07-16 4908
svg图形的绘制
【HTML5】svg 绘制图形
qq_45677671的博客
06-30 4802
SVG 绘制图形教程
svg标签画图
txwsmsm7023_的博客
06-19 1113
<svg>和<canvas>都是可以用来画图的但还是两者有着本质的区别 <svg>SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 <canvas> C...
SVG了解与绘图应用
qq_56668869的博客
07-27 926
SVG概念、使用方式、SVG创建图形、SVG绘制矩形、圆形、椭圆、文本、多边形、路径...
SVG入门—如何手写SVG
weixin_33978016的博客
04-11 3013
欢迎关注富途web开发团队 ，缺人从众 小编刚来公司的时候，有个需求需要做一个图形动画，当时本来想使用图片做的。Toobug看了需求后，就说可以使用SVG做呀。小编当时对与SVG一点都不会呀。Toobug看我那无辜的表情，说没事。我这有一本书 《SVG精髓》（作者：就是Toobug），你拿去看看，边学边做呗。 好吧，小编后面就看了一个星期的SVG精髓，现在也算入门了吧。 那么今天小编也不是让大...
SVG入门：掌握可伸缩矢量图形技术与优势
2. 图形构建：涵盖了SVG的基本形状（例如`<rect>`、`<circle>`）、路径（`<path>`）、文本（`<text>`）和绘画模型（如何组织和组合元素）。 3. 动画和脚本：虽然JavaScript不是必需的，但在教程中会涉及简单的脚本...
NimSvg：基于Nim的DSL，允许生成SVG文件和GIF动画
02-03
总之，NimSvg为Nim程序员提供了一种强大而优雅的方式来生成SVG图形和GIF动画，极大地提高了工作效率，降低了图形编程的入门门槛。通过深入研究NimSvg的源码、示例和文档，开发者可以进一步掌握SVG和GIF的生成技术，...
PS从入门到精通第三节素材包
01-26
在“PS从入门到精通第三节素材包”中，我们主要会探讨一些核心的Photoshop技能和概念，这对于UI（User Interface，用户界面）设计来说至关重要。 在这一节中，你将学习如何有效地使用Photoshop来提升你的UI设计能力...
svg画图(汽车)
01-25
svg画图，用画图工具画的svg格式的汽车，供大家参考
svg画图保姆级教程
qq_52775800的博客
01-05 1042
svg画图，做出地图立体感！
4. SVG基本图形绘制教程
最新发布
一名全栈开发工程师
05-10 755
基本的SVG图形绘制的教程说明
Svg绘制基本图形以及动画图形。
gx01013的博客
07-16 1080
Svg绘制基本图形以及动画图形。
svg图版绘制
z19950712的博客
06-25 1061
问题二、画好折线后，在编辑器内能显示出正常效果，但是在系统页面上显示不出来。直接使用鼠标左键点对点进行绘制，停顿一次为一个坐标，鼠标右击结束粘连；也能达到该效果，但是折线不连贯，用户在点击的时候选中不了整段折线；绘制带折线的图版，使用左侧工具栏（绘制贝塞尔曲线和直线）解决：使用文本编辑工具打开svg图对应源码，把新增加的。问题一：绘制折线后，上面的文字一直会被折线覆盖；选中该文字后，点击图层，把文字设置为最顶层；选中顶部（创建一个直线段构成的折线）右侧顶部可对该图版对象属性就行编辑；绘制贝塞尔曲线和直线。
Svg画图
weixin_52568086的博客
03-17 4292
一.Svg是什么？ SVG 指可伸缩矢量图形 SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 + SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 在使用svg画图时，要先在文档中写入<svg>节点<svg></svg>在其中扮演的角色就相当于一块画板，可以在其中绘制各种图案 二．矩形 <rect> 实例：如下图 ..
SVG 画图
热门推荐
前端技术的学习整理
04-16 1万+
SVG 在线画图工具：https://svg.haowen100.com/ 把画的图片代码保存成svg文件，加载 http://www.bejson.com/convert/image_to_svg/https://www.aconvert.com/cn/image/png-to-svg/ 参考一 SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vecto...
（html）SVG实现画图功能，画一朵小花
clmmei_123的博客
08-01 8235
&lt;canvas&gt; 标记和 SVG 以及 VML 之间的一个重要的不同是，&lt;canvas&gt; 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。 更详细的svg实现的功能，请访问http://www.w3school.com.cn/svg/index.asp 一、创建一个 XXX.svg文件（该文件，创建了一个红...
Inkscape基础教程：SVG编辑入门
"Inkscape教程，SVG编辑器软件，Inkscape基础操作，画布浏览，文档管理，形状工具，图形选取，变形，群组，填充与轮廓，对齐和叠放，平移，缩放，工具列，快捷键" Inkscape是一款强大的SVG向量图形编辑器，其主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值