svg学习

官方认证新生代农民工_平安喜乐

已于 2022-11-27 22:29:00 修改

阅读量1.3k

点赞数 2

分类专栏：笔记文章标签：学习

于 2022-11-27 22:26:58 首次发布

本文链接：https://blog.csdn.net/weixin_60968779/article/details/128063664

版权

笔记专栏收录该内容

102 篇文章 4 订阅

订阅专栏

一、初始SVG

1.概述

fill 属性可以更改她的颜色

svg 可以转base64编码
svg 可以作图 img 标签的src 不可以操作
svg 可以使用 iframe引入
object 标签也可以<object data="img/炮.svg" type="image/svg+xml"></object>
embed 标签也可以 <embed src="img/炮.svg" type="image/svg+xml" />

2.语法

2.1 svg标签

svg代码都放在顶层标签<svg>之中

  <svg width="100%" height="100%">
    <circle id="mycircle" cx="50" cy="50" r="50" fill="orange" />
  </svg>

2.2 circle标签

<circle>标签代表圆形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.bgred{
				fill: mediumpurple;
			}
			.bgBlue{
				fill: deepskyblue;
				stroke: red;
				stroke-width: 3px;
			}
		</style>
	</head>
	<body>
		<svg width="100%" height="100%">
			<circle id="mycircle" cx="50" cy="50" r="50" fill="orange"/>
		</svg>
		
		<hr>
		<svg width="100" height="100" viewbox="50 50 50 50">
			<circle  cx="50" cy="50" r="50" fill="orange"/>
		</svg>
		<h1>画圆</h1>
		<svg width = "400" height="400">
			<circle cx="100" cy="100" r="25" fill="yellow"></circle>
			<circle cx="170" cy="170" r="5" class="bgred"></circle>
			<circle cx="170" cy="170" r="10" class="bgBlue"></circle>
		</svg>
	</body>
</html>

2.3 <line> 标签

<line> 标签用来绘制直线

2.4 <polyline>标签

<polyline> 标签用来绘制折现

line标签的x1 y1指定第一个点坐标 x2 y2指定第二个点的坐标

polyline标签的 points 指定每个点坐标横坐标和纵坐标用逗号隔开点用空格隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.line{
				stroke: #00BFFF;
				stroke-width: 5px;
				transition:all 2s;
				/* transform: rotate(45deg); */
				transform-origin: center;
				animation: xuanzhuan 2s linear infinite;
			}
			@keyframes xuanzhuan{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			.line:hover{
				stroke: yellow;
			}
			.polyline{
				stroke: deeppink;
				stroke-width: 5px; 
				fill: none;
			}
		</style>
	</head>
	<body>
		<svg width = "400" height="400">
			<line x1="50" y1="50" x2="350" y2="350"  class="line"></line>
			<polyline points="50,100 50,300 350,300" class="polyline"></polyline>
		</svg>
	</body>
</html>

2.5 <rect>标签

<rect>标签用来绘制矩形

x y 指定了左上角的点坐标， width 和height 分别指定宽和高

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
.rect {
  fill: pink;
  stroke: #9370DB;
  stroke-width: 10px;
}
  </style>
</head>

<body>
  <svg width="400" height="400">
    <rect x="50" y="50" width="250" height="150" class="rect"></rect>
  </svg>
</body>

</html>

2.6<ellipse> 标签

<ellipse> 标签用来绘制椭圆

cx 和 cy 指定中心点坐标， rx 和 ry 分别指定横轴半径和纵轴半径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ellipse{
				fill: #00BFFF;
				stroke: #FFFF00;
				stroke-width: 5px;
			}
		</style>
	</head>
	<body>
		<svg width="400" height="400">
			<ellipse cx="60" cy="60" rx="20" ry="40"></ellipse>
		</svg>
	</body>
</html>

2.7<polygon> 标签

<polygon> 标签绘制多边形

polygon 标签的 points 指定每个点坐标横坐标和纵坐标用逗号隔开点用空格隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.polygon{
				fill: #00BFFF;
				stroke: #FF1493;
				stroke-width: 10px;
			}
		</style>
	</head>
	<body>
		<svg width="400" height="400">
			<polygon points="50,50 350,350 50,350" class="polygon"></polygon>
		</svg>
	</body>
</html>

2.8<path>标签

<path> 标签用来绘制路径

path 的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标

M : 移动到 ( moveto )
L : 画直线到 ( lineto )
Z : 闭合路径

2.9 <text> 标签

<text> 标签用来绘制文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			path{
				stroke: #9370DB;
				stroke-width: 10px;
				fill: none;
			}
			path:hover{
				stroke: red;
			}
			
			text{
				/* color: #FFC0CB; */
				/* 字体的颜色：是用fill进行填充 */
				fill: none;
				font-size: 50px;
				font-weight: 900;
				stroke: #FF0000;
				stroke-width: 2px;
				text-shadow: 0 0 20px #333;
			}
		</style>
	</head>
	<body>
		<svg width="600" height="600">
			<path d="M 50,50 L 100,60 ,L 200,160 ,L 250,300 L 450,450 z"></path>
			<text x="150" y="500">绘制路径</text>
		</svg>
		<hr >
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
		  <path id="lineAB" d="M 100 350 L 250 50" stroke="red" stroke-width="3" fill="none" />
		  <path id="lineBC" d="M 250 50 L 400 350" stroke="red" stroke-width="3" fill="none" />
		  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
		  <path d="M 100 350 Q 250 50 400 350" stroke="blue" stroke-width="5" fill="none" />
		  <!-- Mark relevant points -->
		  <g stroke="black" stroke-width="3" fill="black">
		    <circle id="pointA" cx="100" cy="350" r="3" />
		    <circle id="pointB" cx="250" cy="50" r="3" />
		    <circle id="pointC" cx="400" cy="350" r="3" />
		  </g>
		  <!-- Label the points -->
		  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
		    <text x="100" y="350" dx="-30">A</text>
		    <text x="250" y="50" dy="-10">B</text>
		    <text x="400" y="350" dx="30">C</text>
		  </g>
		</svg>
	</body>
</html>

2.10 <user> 标签

<user> 标签

href 指定复制的对象（ id ），x y 是左上角的坐标点可以设置width 和height

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<svg width="600" height="600" style="border: 1px solid #ccc;">
			<circle id="circle1" cx="200" cy="200" r="50" fill="orange" stroke="skyblue" stroke-width="10"></circle>
			<use href="#circle1" x="200" y="200"></use>
		</svg>
	</body>
</html>

2.11 <g> 标签

<g> 标签将多个形状组成一个组, 方便复用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<svg width="1200" height="1000">
			<g id="miqi">
				<circle cx="100" cy="100" r="50"></circle>
				<circle cx="500" cy="100" r="50"></circle>
				<circle cx="300" cy="300" r="200"></circle>
			</g>
			
			
			<use href="#miqi" x="500" y="0"></use>
		</svg>
	</body>
</html>

2.12<defs> 标签

<defs> 标签用于自定义形状，它内部的代码不会显示，仅供引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.miqi{
				fill: orange;
				transition: all 2s;
				transform: rotate(0deg);
				transform-origin: center;
			}
			.miqi:hover{
				fill: deepskyblue;
				transform: rotate(360deg);
				
			}
		</style>
	</head>
	<body>
		<svg width="1200" height="1000">
			<defs>
				<g id="miqi" class="miqi">
					<circle cx="100" cy="100" r="50"></circle>
					<circle cx="500" cy="100" r="50"></circle>
					<circle cx="300" cy="300" r="200"></circle>
				</g>
			</defs>
			
			
			<use href="#miqi" x="500" y="0"></use>
		</svg>
	</body>
</html>

2.13 <pattern> 标签

<pattern> 标签用于自定义一个形状，该形状可以被引用来平铺一个区域

<pattern> 标签将一个圆形定义为dots模式，patternUnits="userSpaceOnUse"，表示<pattern>的宽度和高度是实际的像素值，然后指定这个模式去填充下面的矩形

矩形 fill 使用 url（#id）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<svg width="500" height="500">
		  <defs>
		    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
		      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
		    </pattern>
		  </defs>
		  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
		</svg>
	</body>
</html>

2.14<image> 标签

<image> 标签用于插入图片文件

<image> 标签的 xlink:href 表示图片来源

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<svg viewBox="0 0 1000 1000" width="1000" height="1000">
		  <image xlink:href="img/0.png"
		    width="50%" height="50%"/>
		</svg>
	</body>
</html>

2.15<animate> 标签

<animate> 标签用于产生动画

attributeName :发生动画效果的属性名。
from :单次动画的初始值。
to:单次动画的结束值。
dur :单次动画的持续时间。
repeatCount :动画的循环模式。

可以在多个属性上面定义动画。

向x y 移动500 ， 2秒 ， 颜色变化 ，重复触发
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<svg width="1000" height="1000">
			<rect x="0" y="0" width="100" height="50" fill="orange">
				<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" ></animate>
				<animate attributeName="y" from="0" to="500" dur="2s" repeatCount="indefinite" ></animate>
				<animate attributeName="fill" from="orange" to="skyblue" dur="2s" repeatCount="indefinite" ></animate>
			</rect>
		</svg>
	</body>
</html>

2.16<animateTransform> 标签

<animate> 标签对CSS的transform属性不起作用,如果需要变形,就要使用<amp mateTransform>标签。

下面代码中. <animateTransform>的效果为旋转( rotate) , 这时from和to属性值有三个数字,第一个数字是
角度值,第二个值和第三个值是旋转中心的坐标。from="0 200 200”表开始时,角度为0 ,围绕(200, 200)开始
旋转; to="360 400 400"表示结束时,角度为360 ,围绕(400, 400)旋转。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<svg width="500px" height="500px">
		  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
		    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
		  </rect>
		</svg>
	</body>
</html>

二、svg绘制环形进度条

HTML部分：

<!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>
.text {
  text-anchor: middle;
  dominant-baseline: middle;
}

body {
  text-align: center;
}
  </style>
</head>

<body>
  <svg xmlns="http://www.w3.org/200/svg" height="700" width="700">
    <!-- 设置底色的圆环  -->
    <circle cx="350" cy="350" r="300" fill="none" stroke="grey" stroke-width="40"
      stroke-linecap="round"></circle>

    <!-- 设置进度条 -->
    <circle class="progess" transfrom="rotate(-90,350,350)" cx="350" cy="350" r="300" fill="none"
      stroke="red" stroke-width="40" stroke-linecap="round" stroke-dasharray="0,10000" />
    <!-- stroke-dasharray 一个表示长度 一个表示间距 -->

    <!-- 设置文本  -->
    <text class="text" x="350" y="350" font-size="200" fill="red">
      0
    </text>
  </svg>

  <script src="js/index.js"></script>
</body>

</html>

JS部分：

//  获取进度条 circle 对象
let progessDom = document.querySelector('.progess')
// 获取文本对象
let textDom = document.querySelector('.text')

function roteteCircle(persent) {
  // 获取svg圆形环的总长，通过半径长度算出总长
  let circleLength = Math.floor(2 * Math.PI * parseFloat(progessDom.getAttribute('r')))
  // 按照百分比，算出圆环的长度
  let value = persent * circleLength / 100
  // 红色是RGB,255,0,0
  //   蓝色rgb值, 0, 191, 255
  let red = 255 + parseInt((0 - 255) / 100 * persent)
  let green = 0 + parseInt((191 - 0) / 100 * persent)

  let blue = 0 + parseInt((255 - 0) / 100 * persent)
  //   设置stroke-dasharray和路径的颜色 
  progessDom.setAttribute("stroke-dasharray", value + ",10000")
  progessDom.setAttribute("stroke", `rgba(${red},${green},${blue})`)

  //   设置文本内容和颜色
  textDom.innerHTML = persent + '%'
  textDom.setAttribute("fill", `rgba(${red},${green},${blue})`)

}

// 30毫秒变化进度+1 
let num = 0

setInterval(() => {
  num++
  if (num == 100) {
    num = 0
  }
  roteteCircle(num)
}, 30)

三、JavaScript操作

3.1 DOM操作

如果SVG代码写在HTML网页中，它就成了为网页DOM的一部分，可以直接用DOM操作

矩形点击放大改变颜色移动位置

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <svg width="400" height="400">
    <rect x="50" y="50" width="250" height="150" class="rect"></rect>
  </svg>

  <button>放大矩形</button>
  <script type="text/javascript">
var btn = document.querySelector("button")
//

btn.onclick = function() {
  var svgRect = document.querySelector("rect")
  console.log([svgRect])
  svgRect.setAttribute("width", "350")
  svgRect.setAttribute("height", "250")
  svgRect.style.fill = "orangered"
  //svgRect.setAttribute("x","200")
  var sudu = 2;
  var weizhi = 50;
  setInterval(function() {
    weizhi = weizhi + sudu;
    svgRect.setAttribute("x", weizhi)
  }, 10)
}
  </script>
</body>

</html>

打炮案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#paoshen{
				transform: translate(0,800px);
			}
			#qiu{
				transform: translate(0,800px);
			}
		</style>
	</head>
	<body>
		<?xml version="1.0" standalone="no"?>
			<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1572485123131"
			 class="icon" viewBox="0 0 4606 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9645" xmlns:xlink="http://www.w3.org/1999/xlink"
			 width="900" height="400">
				<defs>
					<style type="text/css"></style>
				</defs>
				<g id="paoshen">
					<path d="M59.238716 644.951169l31.864078-5.365429-18.286258-98.548695-31.864078 5.365428a50.040837 50.040837 0 0 0-40.07647 58.472226 50.150336 50.150336 0 0 0 58.362728 40.07647z"
					 fill="#EB3D72" p-id="9646"></path>
					<path d="M663.342217 532.934152C539.061362 532.934152 437.9942 637.724264 437.9942 766.494559s101.17666 233.450909 225.457515 233.450909S888.799731 895.264854 888.799731 766.494559s-101.067162-233.560407-225.457514-233.560407zM842.372346 744.594849H713.383054l92.307278-92.416776A187.790013 187.790013 0 0 1 842.372346 744.594849z m-157.349417-28.360124V581.113514a176.402164 176.402164 0 0 1 93.511762 41.718947z m-39.96697 0l-94.935243-94.935243A177.059156 177.059156 0 0 1 645.055959 580.347024z m0 96.577721v139.501153a176.402164 176.402164 0 0 1-97.344211-42.375939z m39.96697 138.077672V812.812446L780.505665 908.842674a176.511663 176.511663 0 0 1-95.592234 43.79942s0.109499-1.423481 0.109498-1.751976zM522.417583 650.207099L616.805333 744.594849h-132.493246a190.198982 190.198982 0 0 1 38.105496-94.38775z m-38.54349 134.354721h132.93124l-95.92073 95.92073a189.651489 189.651489 0 0 1-37.01051-95.92073z m323.458717 93.949756l-93.949756-93.949756H843.138836a189.213495 189.213495 0 0 1-35.806026 93.949756z"
					 fill="#684821" p-id="9647"></path>
					<path d="M1630.214414 460.446112L344.263442 781.276863a235.093387 235.093387 0 0 1-273.746376-188.118509 234.764891 234.764891 0 0 1 188.118509-273.746375l1312.121126-179.139628z"
					 fill="#44286E" p-id="9648"></path>
					<path d="M383.792418 644.403676A235.421883 235.421883 0 0 1 105.994597 419.712651a233.998402 233.998402 0 0 0-35.696528 173.445703 235.093387 235.093387 0 0 0 273.746375 188.118509l1285.950973-320.830751L1607.657713 339.450214z"
					 fill="#44286E" opacity=".4" p-id="9649"></path>
					<path d="M1531.865131 59.038079m38.217356-7.103868l0.107655-0.020011q38.217356-7.103868 45.321224 31.113488l73.239881 394.015557q7.103868 38.217356-31.113488 45.321224l-0.107655 0.020011q-38.217356 7.103868-45.321224-31.113488l-73.23988-394.015557q-7.103868-38.217356 31.113487-45.321224Z"
					 fill="#EB3D72" p-id="9650"></path>
					<path d="M376.346517 1023.049662H140.596138a21.89971 21.89971 0 1 1 0-42.704434H364.630172l133.369234-208.047246L386.529882 259.516272a21.89971 21.89971 0 0 1 41.828446-9.088379l113.330999 521.322597A21.89971 21.89971 0 0 1 538.732867 788.394269L394.19478 1013.194793a21.13322 21.13322 0 0 1-17.848263 9.854869z"
					 fill="#EB3D72" p-id="9651"></path>
					<path d="M596.6576 574.215105C484.531084 574.215105 394.19478 667.945864 394.19478 784.342823s90.883797 210.127718 203.010312 210.127718S799.339416 900.411286 799.339416 784.342823s-90.664799-210.127718-202.681816-210.127718z m0 276.593338a66.46562 66.46562 0 1 1 64.16615-66.46562 65.69913 65.69913 0 0 1-64.16615 66.46562z"
					 fill="#684821" p-id="9652"></path>
					<path d="M596.6576 1018.341224C472.267247 1018.341224 371.200085 913.113118 371.200085 784.342823s101.067162-233.450909 225.457515-233.450909 225.457515 104.680614 225.457514 233.450909S720.938454 1018.341224 596.6576 1018.341224z m0-420.255435C497.123417 597.538296 416.09449 681.304687 416.09449 784.342823s81.028927 186.804526 180.56311 186.804526S777.439706 886.942964 777.439706 784.342823s-81.357423-186.804526-180.782106-186.804527z"
					 fill="#A56F34" p-id="9653"></path>
					<path d="M824.414584 430.662506c10.183365-2.189971 61.100191-21.242719 50.040837-71.72155s-54.749275-39.309979-54.749275-39.30998A32.849565 32.849565 0 1 0 834.050456 383.249634s-3.394455 7.445901-22.6662 10.949855-33.944551-11.825843-39.857472-38.433991c-5.365429-24.637174 13.796817-91.321791 102.600142-120.448405l-100.957664 13.687318c-32.849565 32.849565-47.960365 74.897008-39.200481 114.973478 15.986788 73.035533 80.152939 68.984087 90.445803 66.684617z"
					 fill="#EB3D72" p-id="9654"></path>
					
					
					<path d="M578.261843 577.938056m14.015815 0l11.935341 0q14.015814 0 14.015815 14.015814l0 380.945456q0 14.015814-14.015815 14.015815l-11.935341 0q-14.015814 0-14.015815-14.015815l0-380.945456q0-14.015814 14.015815-14.015814Z"
					 fill="#A56F34" p-id="9658"></path>
					<path d="M728.72802 623.635756m9.910677 9.910678l8.439561 8.439561q9.910677 9.910677 0 19.821355l-269.369115 269.369115q-9.910677 9.910677-19.821354 0l-8.439562-8.439561q-9.910677-9.910677 0-19.821355l269.369115-269.369115q9.910677-9.910677 19.821355 0Z"
					 fill="#A56F34" p-id="9659"></path>
					<path d="M802.733871 762.333614m0 14.015815l0 11.935342q0 14.015814-14.015815 14.015814l-380.945455 0q-14.015814 0-14.015815-14.015814l0-11.935342q0-14.015814 14.015815-14.015815l380.945455 0q14.015814 0 14.015815 14.015815Z"
					 fill="#A56F34" p-id="9660"></path>
					<path d="M757.041256 912.796584m-9.910677 9.910677l-8.439561 8.439561q-9.910677 9.910677-19.821355 0l-269.369115-269.369115q-9.910677-9.910677 0-19.821354l8.439561-8.439562q9.910677-9.910677 19.821355 0l269.369115 269.369115q9.910677 9.910677 0 19.821355Z"
					 fill="#A56F34" p-id="9661"></path>
					
					<path d="M551.3252 784.342823a48.617356 46.974878 90 1 0 93.949756 0 48.617356 46.974878 90 1 0-93.949756 0Z" fill="#BC7F42"
					 p-id="9663"></path>
					<path d="M576.290869 784.342823a22.775698 22.009209 90 1 0 44.018417 0 22.775698 22.009209 90 1 0-44.018417 0Z" fill="#CE9663"
					 p-id="9664"></path>
					<path d="M1612.147153 491.215204a38.981484 38.981484 0 0 0 45.441899 31.207087 38.871985 38.871985 0 0 0 31.097588-45.3324l-28.031629-150.9985-75.663498 18.614753z"
					 fill="#D83269" p-id="9665"></path>
					
				</g>
				
				
				 
				 
				 <g id="qiu">
					
					<path d="M2141.134649 160.639081m-145.085579 0a145.085579 145.085579 0 1 0 290.171158 0 145.085579 145.085579 0 1 0-290.171158 0Z"
					   fill="#212121" p-id="9655"></path>
					<path d="M2147.704562 178.377847c6.241417-4.379942 35.149035-31.426084 13.468321-62.195177s-47.522371-10.949855-47.52237-10.949855a24.527675 24.527675 0 0 0-7.007907 33.835052 24.637174 24.637174 0 0 0 34.273046 5.036933s0 5.912922-12.154339 13.687319-26.170153 1.53298-37.558003-14.672806-17.410269-73.583026 48.507858-120.448405a78.619959 78.619959 0 0 1 6.898408-4.270443 31.864078 31.864078 0 0 0-36.134521-10.949855c-55.734762 45.3324-71.502553 109.49855-42.266441 151.217498a57.267742 57.267742 0 0 0 79.495948 19.709739z"
					   fill="#3F3F3F" p-id="9656"></path>
					<path d="M1907.245746 168.960971l-120.776901 27.922131M1786.468845 212.431896a15.548794 15.548794 0 0 1-3.503954-30.769093l120.448406-27.812632a15.548794 15.548794 0 1 1 7.007907 30.331099l-120.448405 27.812631a13.358823 13.358823 0 0 1-3.503954 0.437995zM1908.888224 268.166658l-57.37724 13.906316M1851.510984 297.621768a15.548794 15.548794 0 0 1-3.722951-30.659594l57.486739-13.906316a15.548794 15.548794 0 1 1 7.336403 30.2216l-57.267742 13.906315a15.001301 15.001301 0 0 1-3.832449 0.437995z"
					    fill="#C6C5C4" p-id="9657"></path>
					<path d="M2220.411599 209.037441m-15.439296 0a15.439296 15.439296 0 1 0 30.878592 0 15.439296 15.439296 0 1 0-30.878592 0Z"
						 fill="#FFFFFF" p-id="9666"></path>
					<path d="M2141.134649 321.273454a160.634373 160.634373 0 1 1 160.634373-160.634373 160.85337 160.85337 0 0 1-160.634373 160.634373z m0-290.171157a129.536785 129.536785 0 1 0 129.427286 129.536784 129.755782 129.755782 0 0 0-129.427286-129.536784z"
						  fill="#3F3F3F" p-id="9662"></path>
				 </g>
			</svg>
			
			<hr >
			<button>
				发射
			</button>
			<script type="text/javascript">
				var qiu = document.querySelector("#qiu")
				console.log([qiu])
				qiu.style.display = "none";
				var btn = document.querySelector("button")
				btn.onclick = function(){
					qiu.style.display = "block";
					var x = 0;
					var y = 800;
					var interId = setInterval(function(){
						x = x + 5;
						y = y - 2;
						qiu.style.transform = "translate("+x+"px,"+y+"px)";
						if(y<-400){
							clearInterval(interId)
						}
					},5)
				}
				
			</script>
	</body>
</html>

3.2获取SVG DOM

使用、<object>、 <embed>标签插入SVG文件,可以获取SVG DOM.
var svgobject = document. getE lementById(' object '). contentDocument;
var svgIframe = document. getE 1 ementById(' iframe ') . contentDocument;
var svgEmbed = document. getE lementById(' embed '). getSVGDocument();

contentDocument 可以拿到#document

注意,如果使用<img>标签插入SVG文件,就无法获取SVG DOM.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="img/pao.svg" width="450" height="200" scrolling="no" style="border: none;"></iframe>
		<button type="button">改变球的颜色</button>
		<script type="text/javascript">
			var iframe = document.querySelector("iframe")
			
			console.log([iframe])
			iframe.onload = function(){
				svgDoc = iframe.contentDocument;
				console.log(svgDoc)
				
			}
			
			
			var btn = document.querySelector("button")
			btn.onclick = function(){
				var qiu = svgDoc.querySelector("[p-id='9655']")
				console.log(qiu.style.fill = "skyblue")
			}
		</script>
	</body>
</html>

绘制条形图案例

<!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>
.axis {
  stroke: #999;
  stroke-width: 2px;
}
  </style>
</head>

<body>
  <!-- 
    1 获取数据
    2 创建SVG
    3 创建坐标
    4 绘制坐标
    5 依据数据绘制矩形（条形）
 -->
  <svg width="1000" height="700">
    <g id="zuobiao">
      <!-- x轴-->
      <line class="axis" x1="50" y1="600" x2="950" y2="600"></line>
      <path d="M 925,590 L 950,600 L 925,610"></path>
      <text x="920" y="630">时间</text>
      <!-- y轴-->
      <line class="axis" x1="100" y1="650" x2="100" y2="50"></line>
      <path d="M 90,75 L 100,50 L 110,75"></path>
      <text x="920" y="630">时间</text>
    </g>
    <g id="xkedu">
      <!-- <line class="axis" x1="170" y1="600" x2="170" y2="580"></line> -->
      <text x="50" y="70">订单</text>
    </g>
    <g id="ykedu"></g>
    <g id="barList"></g>
  </svg>

  <script>
// 数据 
let data = [{
    data: "星期一",
    order: "1000"
  },
  {
    data: "星期二",
    order: "500"
  },
  {
    data: "星期三",
    order: "600"
  },
  {
    data: "星期四",
    order: "1100"
  },
  {
    data: "星期五",
    order: "700"
  },
  {
    data: "星期六",
    order: "1200"
  },
  {
    data: "星期日",
    order: "1500"
  }
]

let xkedu = document.querySelector("#xkedu");
let ykedu = document.querySelector("#ykedu");
let barListDom = document.querySelector("#barList")
let jgLength = 700 / data.length;
let yLength = 450 / 15;

for (let i = 1; i <= data.length; i++) {
  renderKedu(i)
  console.log(i)
}

for (var j = 1; j <= 15; j++) {
  ykedu.innerHTML = ykedu.innerHTML +
    `<line class="axis" x1="100" y1="${600-yLength*j}" x2="120" y2="${600-yLength*j}"></line>` +
    `<text x="50" y="${600-yLength*j}">${100*(j)}</text>`
}
// 创建刻度 
function renderKedu(index) {
  let lineDom = document.createElement("line")
  console.log(jgLength)
  lineDom.className = "axis";
  lineDom.setAttribute("x1", 100 + jgLength * index);
  lineDom.setAttribute("y1", "600");
  lineDom.setAttribute("x2", 100 + jgLength * index);
  lineDom.setAttribute("y2", "580");
  xkedu.innerHTML = xkedu.innerHTML + lineDom.outerHTML +
    `<text x="${75+jgLength*index}" y="620">${data[index-1].data}</text>`


  let color =
    `rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)})`;
  barListDom.innerHTML = barListDom.innerHTML +
    `<rect x="${75+jgLength*index}" y="${600-(yLength*(data[index-1].order/100))}" width="50" height="${yLength*(data[index-1].order/100)}" fill="${color}"></rect>`

}
  </script>
</body>

</html>