svg学习过程

最新推荐文章于 2023-04-20 22:09:00 发布

屈小康

最新推荐文章于 2023-04-20 22:09:00 发布

阅读量155

点赞数

分类专栏： svg 文章标签： css svg

本文链接：https://blog.csdn.net/qq_45557681/article/details/115701629

版权

svg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.svg的格式

svg的格式和png的格式不一样，png 的格式为二进制，而svg的格式为富文本格式。

2.语法

	<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		svg {
			background-color: antiquewhite;
		}

		.myscrile {
			fill: red;
			/* 描边 */
			stroke: yellow;
			/* 描边宽度 */
			stroke-width: 1px;
		}

		.myscrile:hover {
			fill: blanchedalmond;
			/* 描边 */
			stroke: yellow;
			/* 描边宽度 */
			stroke-width: 1px;
			
		}

		.lineNow {
			stroke: red;
			animation: identifier 2s linear infinite;
			transform-origin: center;
		}
		@keyframes identifier {
			0%{
				transform: rotate(0deg)
			}
			100%{
				transform: rotate(360deg);
			}
		}
	</style>
</head>

<body>
	<!-- viewBox四个值分别为 ： z左上角的横坐标和纵坐标 视口的高度和宽度 -->
	<svg width="400px" height="400px" viewBox="50 50 50 50">
		<circle class="myscrile" cx="50" cy="50" r="25">

		</circle>
	</svg>
	<svg width="100px" height="100px">
		<circle id="myscrile" cx="50" cy="50" r="50">

		</circle>
	</svg>
	<svg width="300" height="300">
		<!-- 线段 -->
		<line class="lineNow" x1="50" y1="50" x2="350" y2="350"> </line>
		<!-- 折现 -->
		<polyline points="50,100,50 300 ,350 300" style="stroke: yellow;fill:none"></polyline>
	</svg>
	<!-- 矩形 -->

	<svg width="300" height="300">
	  <rect x="0" y="0" height="100" width="300" style="stroke: #70d5dd;fill:yellow"></rect>
	</svg>
	<!-- 椭圆 -->
	<svg width="300" height="300">
		<ellipse cx="80" cy="80" ry="40" rx="20"  style="stroke: #70d5dd;fill:yellow;stroke-width:5"></ellipse>
	</svg>
	<!-- 多边形-->
	<svg width="300" height="300">
		<polygon 
        points="20,50,250,250,20,250"	
		style="stroke: #70d5dd;fill:yellow;stroke-width:5"></polygon>
	</svg>
	<!-- 绘制折线-->
	<svg width="300" height="300">
		<!-- 
			M:移动到
			L：画直线到
			Z：闭合回路
		 -->
		<path 

		d=" M 0 ,3 L 46 , 3 L 46 , 40 L 61 ,40 L 32 ,40 Z"

		style="stroke: #70d5dd;fill:none;stroke-width:1">

	 	</path>
	</svg>
	<!-- 绘制文本 -->

	<svg width="300" height="300">
		<!-- 
			M:移动到
			L：画直线到
			Z：闭合回路
		 -->
		<path d=" M 0 ,3 L 46 , 3 L 46 , 40 L 61 ,40 L 32 ,40 Z" style="stroke: #70d5dd;fill:none;stroke-width:1">

		</path>
	</svg>




</body>

</html>

3.复制图片节点

	<svg width="400px" height="400px" >
		<circle id="myscrile" cx="100" cy="100" r="50">

		</circle>
//通过use进行复制 节点
		<use href="#myscrile" x="200" y="200" fill="white" stroke="blue" />

	</svg>

4.复制组

	<!-- 复制组 -->
	<svg height="600" width="600">

		<g id="miqi">
			<circle cx="50" cy="50" r="50"></circle>
			<circle cx="200" cy="200" r="100"></circle>
			<circle cx="350" cy="50" r="50"></circle>
		</g>
		<use href="#miqi" x =" 0" y = "300" /> 

	</svg>
//dfs  不显示内容
	<!-- 复制组 -->
	<svg height="600" width="600">
		<dfs>
			<g id="miqi">
				<circle cx="50" cy="50" r="50"></circle>
				<circle cx="200" cy="200" r="100"></circle>
				<circle cx="350" cy="50" r="50"></circle>
			</g>
		</dfs>


		<use href="#miqi" x=" 0" y="300" />

	</svg>

5.平铺内容

	<!-- 平铺内容 -->

	<svg height="600" width="600">
		<defs>
			<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
				<circle cx="50" cy="50" r="35" fill="red"></circle>
			</pattern>
		</defs>

		<rect x=" 0 " y=" 0 " width="100%" height="100%" fill="url(#dots)"></rect>

	</svg>

屈小康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg学习过程

1.svg的格式svg的格式和png的格式不一样，png 的格式为二进制，而svg的格式为富文本格式。2.语法 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
复制链接

扫一扫