HTML5之SVG小案例

最新推荐文章于 2022-10-03 20:01:01 发布

沁柠

最新推荐文章于 2022-10-03 20:01:01 发布

阅读量598

点赞数 2

本文链接：https://blog.csdn.net/weixin_45846241/article/details/105936976

版权

SVG可以绘制矩形、线条、圆、折线等等…现在就来看看用SVG做出的小案例，话不多说，上图
一、国际象棋
在这里插入图片描述
这是国际象棋的棋盘，使用了64个矩形绘制而成，其中黑白矩形各一半，使用了JS和HTML代码，话不多说，上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>国际象棋</title>
	<style>
	    body {
	      text-align: center;
	    }
	 
	    svg {
	      background: #f0f0f0;
	      border: 1px solid black;
	    }
  </style>
</head>
<body>
	<svg width="400" height="400" id="list"></svg>
	<script type="text/javascript">
		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",50);
				rect.setAttribute("height",50);
				rect.setAttribute("x",i*50);
				rect.setAttribute("y",j*50);
				if(flag){
					rect.setAttribute("fill","#fff");
				}else{
					rect.setAttribute("fill","#000");
				}
				list.appendChild(rect);
				flag = !flag;
			}
			flag = !flag;
		}
	</script>
</body>
</html>

二、菜单图标
在这里插入图片描述
这个小图标就是平时逛网站中的菜单图标，其中主要的是用了g标签（group:小组）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>菜单图标</title>
	<style>
	    body {
	      text-align: center;
	    }
	 
	    svg {
	      background: #f0f0f0;
	    }
  </style>
</head>
<body>
	<svg width="600" height="400" id="svg15">
  <!--group:小组-->
	  <g stroke="#000" stroke-width="50">
	    <line x1="100" y1="100" x2="200" y2="100"></line>
	    <line x1="250" y1="100" x2="500" y2="100"></line>
	    <line x1="100" y1="200" x2="200" y2="200"></line>
	    <line x1="250" y1="200" x2="500" y2="200"></line>
	    <line x1="100" y1="300" x2="200" y2="300"></line>
	    <line x1="250" y1="300" x2="500" y2="300"></line>
	  </g>
 
	</svg>

</body>
</html>

三、五角星
在这里插入图片描述

绘制五角星主要要注意几个角的坐标，这是我按照自己手画的顺序定的点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五角星</title>
	<style>
	    body {
	      text-align: center;
	    }
	 
	    svg {
	      background: #f0f0f0;
	    }
	    polyline {	    	
	    	fill: red;
	    }
  </style>
</head>
<body>
	<svg width="600" height="400" id="svg15">
		                <!-- 1       2       3       4      5       6-->
		<polyline points="100,200 500,200 150,350 300,50 450,350 100,200" style="fill:none;stroke:#1B6AB9;stroke-width:3" />
	</svg>
</body>
</html>

四、信封
在这里插入图片描述
信封，上面一个三角形，下面一个多边形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>信封</title>
	<style>
	    body {
	      text-align: center;
	    }
	 
	    svg {
	      background: #f0f0f0;
	    }
  </style>
</head>
<body>
	<svg width="600" height="400" id="svg15">
	  <g fill="#000">
	    <polygon points="100,100 300,200 500,100"></polygon>
	    <polygon points="100,130 100,300 500,300 500,130 300,230" ></polygon>
	  </g>
	</svg>
</body>
</html>