• svg学习

    一、初始SVG

    1.概述

     fill 属性可以更改她的颜色

    1. svg 可以转base64编码
    2. svg 可以作图 img 标签的src  不可以操作
    3. svg 可以使用 iframe引入
    4. object 标签也可以
    5. embed 标签也可以

     2.语法

    2.1 svg标签

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

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

     2.2 circle标签

    标签代表圆形

     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			.bgred{
    8. 				fill: mediumpurple;
    9. 			}
    10. 			.bgBlue{
    11. 				fill: deepskyblue;
    12. 				stroke: red;
    13. 				stroke-width: 3px;
    14. 			}
    15. 		style>
    16. 	head>
    17. 	<body>
    18. 		<svg width="100%" height="100%">
    19. 			<circle id="mycircle" cx="50" cy="50" r="50" fill="orange"/>
    20. 		svg>
    21. 		
    22. 		<hr>
    23. 		<svg width="100" height="100" viewbox="50 50 50 50">
    24. 			<circle  cx="50" cy="50" r="50" fill="orange"/>
    25. 		svg>
    26. 		<h1>画圆h1>
    27. 		<svg width = "400" height="400">
    28. 			<circle cx="100" cy="100" r="25" fill="yellow">circle>
    29. 			<circle cx="170" cy="170" r="5" class="bgred">circle>
    30. 			<circle cx="170" cy="170" r="10" class="bgBlue">circle>
    31. 		svg>
    32. 	body>
    33. html>

    2.3 标签

      标签用来绘制直线

    2.4 标签

    标签用来绘制折现

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			.line{
    8. 				stroke: #00BFFF;
    9. 				stroke-width: 5px;
    10. 				transition:all 2s;
    11. 				/* transform: rotate(45deg); */
    12. 				transform-origin: center;
    13. 				animation: xuanzhuan 2s linear infinite;
    14. 			}
    15. 			@keyframes xuanzhuan{
    16. 				from{
    17. 					transform: rotate(0deg);
    18. 				}
    19. 				to{
    20. 					transform: rotate(360deg);
    21. 				}
    22. 			}
    23. 			.line:hover{
    24. 				stroke: yellow;
    25. 			}
    26. 			.polyline{
    27. 				stroke: deeppink;
    28. 				stroke-width: 5px; 
    29. 				fill: none;
    30. 			}
    31. 		style>
    32. 	head>
    33. 	<body>
    34. 		<svg width = "400" height="400">
    35. 			<line x1="50" y1="50" x2="350" y2="350"  class="line">line>
    36. 			<polyline points="50,100 50,300 350,300" class="polyline">polyline>
    37. 		svg>
    38. 	body>
    39. html>

    2.5 标签

    标签用来绘制矩形

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

    1. html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>title>
    7.   <style type="text/css">
    8. .rect {
    9.   fill: pink;
    10.   stroke: #9370DB;
    11.   stroke-width: 10px;
    12. }
    13.   style>
    14. head>
    15.  
    16. <body>
    17.   <svg width="400" height="400">
    18.     <rect x="50" y="50" width="250" height="150" class="rect">rect>
    19.   svg>
    20. body>
    21.  
    22. html>

    2.6 标签

    <ellipse> 标签用来绘制椭圆

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			ellipse{
    8. 				fill: #00BFFF;
    9. 				stroke: #FFFF00;
    10. 				stroke-width: 5px;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<svg width="400" height="400">
    16. 			<ellipse cx="60" cy="60" rx="20" ry="40">ellipse>
    17. 		svg>
    18. 	body>
    19. html>

    2.7<polygon> 标签

    标签绘制多边形

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			.polygon{
    8. 				fill: #00BFFF;
    9. 				stroke: #FF1493;
    10. 				stroke-width: 10px;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<svg width="400" height="400">
    16. 			<polygon points="50,50 350,350 50,350" class="polygon">polygon>
    17. 		svg>
    18. 	body>
    19. html>

    2.8标签

    标签用来绘制路径

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

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

    2.9 标签

    标签用来绘制文本

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			path{
    8. 				stroke: #9370DB;
    9. 				stroke-width: 10px;
    10. 				fill: none;
    11. 			}
    12. 			path:hover{
    13. 				stroke: red;
    14. 			}
    15. 			
    16. 			text{
    17. 				/* color: #FFC0CB; */
    18. 				/* 字体的颜色：是用fill进行填充 */
    19. 				fill: none;
    20. 				font-size: 50px;
    21. 				font-weight: 900;
    22. 				stroke: #FF0000;
    23. 				stroke-width: 2px;
    24. 				text-shadow: 0 0 20px #333;
    25. 			}
    26. 		style>
    27. 	head>
    28. 	<body>
    29. 		<svg width="600" height="600">
    30. 			<path d="M 50,50 L 100,60 ,L 200,160 ,L 250,300 L 450,450 z">path>
    31. 			<text x="150" y="500">绘制路径text>
    32. 		svg>
    33. 		<hr >
    34. 		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
    35. 		  <path id="lineAB" d="M 100 350 L 250 50" stroke="red" stroke-width="3" fill="none" />
    36. 		  <path id="lineBC" d="M 250 50 L 400 350" stroke="red" stroke-width="3" fill="none" />
    37. 		  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
    38. 		  <path d="M 100 350 Q 250 50 400 350" stroke="blue" stroke-width="5" fill="none" />
    39. 		  
    40. 		  <g stroke="black" stroke-width="3" fill="black">
    41. 		    <circle id="pointA" cx="100" cy="350" r="3" />
    42. 		    <circle id="pointB" cx="250" cy="50" r="3" />
    43. 		    <circle id="pointC" cx="400" cy="350" r="3" />
    44. 		  g>
    45. 		  
    46. 		  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
    47. 		    <text x="100" y="350" dx="-30">Atext>
    48. 		    <text x="250" y="50" dy="-10">Btext>
    49. 		    <text x="400" y="350" dx="30">Ctext>
    50. 		  g>
    51. 		svg>
    52. 	body>
    53. html>

     2.10 标签

    标签

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<svg width="600" height="600" style="border: 1px solid #ccc;">
    9. 			<circle id="circle1" cx="200" cy="200" r="50" fill="orange" stroke="skyblue" stroke-width="10">circle>
    10. 			<use href="#circle1" x="200" y="200">use>
    11. 		svg>
    12. 	body>
    13. html>

     2.11 标签

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

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<svg width="1200" height="1000">
    9. 			<g id="miqi">
    10. 				<circle cx="100" cy="100" r="50">circle>
    11. 				<circle cx="500" cy="100" r="50">circle>
    12. 				<circle cx="300" cy="300" r="200">circle>
    13. 			g>
    14. 			
    15. 			
    16. 			<use href="#miqi" x="500" y="0">use>
    17. 		svg>
    18. 	body>
    19. html>

    2.12 标签

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			.miqi{
    8. 				fill: orange;
    9. 				transition: all 2s;
    10. 				transform: rotate(0deg);
    11. 				transform-origin: center;
    12. 			}
    13. 			.miqi:hover{
    14. 				fill: deepskyblue;
    15. 				transform: rotate(360deg);
    16. 				
    17. 			}
    18. 		style>
    19. 	head>
    20. 	<body>
    21. 		<svg width="1200" height="1000">
    22. 			<defs>
    23. 				<g id="miqi" class="miqi">
    24. 					<circle cx="100" cy="100" r="50">circle>
    25. 					<circle cx="500" cy="100" r="50">circle>
    26. 					<circle cx="300" cy="300" r="200">circle>
    27. 				g>
    28. 			defs>
    29. 			
    30. 			
    31. 			<use href="#miqi" x="500" y="0">use>
    32. 		svg>
    33. 	body>
    34. html>

    2.13 标签

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

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

    矩形 fill 使用 url（#id）

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<svg width="500" height="500">
    9. 		  <defs>
    10. 		    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
    11. 		      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    12. 		    pattern>
    13. 		  defs>
    14. 		  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
    15. 		svg>
    16. 	body>
    17. html>

    2.14 标签

    标签用于插入图片文件

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<svg viewBox="0 0 1000 1000" width="1000" height="1000">
    9. 		  <image xlink:href="img/0.png"
    10. 		    width="50%" height="50%"/>
    11. 		svg>
    12. 	body>
    13. html>

    2.15<animate> 标签

    标签用于产生动画

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

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

    1. 向x y 移动500 ， 2秒 ， 颜色变化 ，重复触发
    2. html>
    3. <html>
    4. 	<head>
    5. 		<meta charset="utf-8">
    6. 		<title>title>
    7. 	head>
    8. 	<body>
    9. 		<svg width="1000" height="1000">
    10. 			<rect x="0" y="0" width="100" height="50" fill="orange">
    11. 				<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" >animate>
    12. 				<animate attributeName="y" from="0" to="500" dur="2s" repeatCount="indefinite" >animate>
    13. 				<animate attributeName="fill" from="orange" to="skyblue" dur="2s" repeatCount="indefinite" >animate>
    14. 			rect>
    15. 		svg>
    16. 	body>
    17. html>

    2.16 标签

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<svg width="500px" height="500px">
    9. 		  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    10. 		    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
    11. 		  rect>
    12. 		svg>
    13. 	body>
    14. html>

    二、svg绘制环形进度条

     HTML部分：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10. .text {
    11.   text-anchor: middle;
    12.   dominant-baseline: middle;
    13. }
    14.  
    15. body {
    16.   text-align: center;
    17. }
    18.   style>
    19. head>
    20.  
    21. <body>
    22.   <svg xmlns="http://www.w3.org/200/svg" height="700" width="700">
    23.     
    24.     <circle cx="350" cy="350" r="300" fill="none" stroke="grey" stroke-width="40"
    25.       stroke-linecap="round">circle>
    26.  
    27.     
    28.     <circle class="progess" transfrom="rotate(-90,350,350)" cx="350" cy="350" r="300" fill="none"
    29.       stroke="red" stroke-width="40" stroke-linecap="round" stroke-dasharray="0,10000" />
    30.     
    31.  
    32.     
    33.     <text class="text" x="350" y="350" font-size="200" fill="red">
    34.       0
    35.     text>
    36.   svg>
    37.  
    38.   <script src="js/index.js">script>
    39. body>
    40.  
    41. html>

    JS部分：

    1. //  获取进度条 circle 对象
    2. let progessDom = document.querySelector('.progess')
    3. // 获取文本对象
    4. let textDom = document.querySelector('.text')
    5.  
    6. function roteteCircle(persent) {
    7.   // 获取svg圆形环的总长，通过半径长度算出总长
    8.   let circleLength = Math.floor(2 * Math.PI * parseFloat(progessDom.getAttribute('r')))
    9.   // 按照百分比，算出圆环的长度
    10.   let value = persent * circleLength / 100
    11.   // 红色是RGB,255,0,0
    12.   //   蓝色rgb值, 0, 191, 255
    13.   let red = 255 + parseInt((0 - 255) / 100 * persent)
    14.   let green = 0 + parseInt((191 - 0) / 100 * persent)
    15.  
    16.   let blue = 0 + parseInt((255 - 0) / 100 * persent)
    17.   //   设置stroke-dasharray和路径的颜色 
    18.   progessDom.setAttribute("stroke-dasharray", value + ",10000")
    19.   progessDom.setAttribute("stroke", `rgba(${red},${green},${blue})`)
    20.  
    21.   //   设置文本内容和颜色
    22.   textDom.innerHTML = persent + '%'
    23.   textDom.setAttribute("fill", `rgba(${red},${green},${blue})`)
    24.  
    25. }
    26.  
    27. // 30毫秒变化进度+1 
    28. let num = 0
    29.  
    30. setInterval(() => {
    31.   num++
    32.   if (num == 100) {
    33.     num = 0
    34.   }
    35.   roteteCircle(num)
    36. }, 30)

    三、JavaScript操作

    3.1 DOM操作

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

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

    1. DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8" />
    6.   <title>title>
    7. head>
    8.  
    9. <body>
    10.   <svg width="400" height="400">
    11.     <rect x="50" y="50" width="250" height="150" class="rect">rect>
    12.   svg>
    13.  
    14.   <button>放大矩形button>
    15.   <script type="text/javascript">
    16. var btn = document.querySelector("button")
    17. //
    18.  
    19. btn.onclick = function() {
    20.   var svgRect = document.querySelector("rect")
    21.   console.log([svgRect])
    22.   svgRect.setAttribute("width", "350")
    23.   svgRect.setAttribute("height", "250")
    24.   svgRect.style.fill = "orangered"
    25.   //svgRect.setAttribute("x","200")
    26.   var sudu = 2;
    27.   var weizhi = 50;
    28.   setInterval(function() {
    29.     weizhi = weizhi + sudu;
    30.     svgRect.setAttribute("x", weizhi)
    31.   }, 10)
    32. }
    33.   script>
    34. body>
    35.  
    36. html>

    打炮案例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			#paoshen{
    8. 				transform: translate(0,800px);
    9. 			}
    10. 			#qiu{
    11. 				transform: translate(0,800px);
    12. 			}
    13. 		style>
    14. 	head>
    15. 	<body>
    16. 		"1.0" standalone="no"?>
    17. 			svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1572485123131"
    18. 			 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"
    19. 			 width="900" height="400">
    20. 				<defs>
    21. 					<style type="text/css">style>
    22. 				defs>
    23. 				<g id="paoshen">
    24. 					<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"
    25. 					 fill="#EB3D72" p-id="9646">path>
    26. 					<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"
    27. 					 fill="#684821" p-id="9647">path>
    28. 					<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"
    29. 					 fill="#44286E" p-id="9648">path>
    30. 					<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"
    31. 					 fill="#44286E" opacity=".4" p-id="9649">path>
    32. 					<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"
    33. 					 fill="#EB3D72" p-id="9650">path>
    34. 					<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"
    35. 					 fill="#EB3D72" p-id="9651">path>
    36. 					<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"
    37. 					 fill="#684821" p-id="9652">path>
    38. 					<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"
    39. 					 fill="#A56F34" p-id="9653">path>
    40. 					<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"
    41. 					 fill="#EB3D72" p-id="9654">path>
    42. 					
    43. 					
    44. 					<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"
    45. 					 fill="#A56F34" p-id="9658">path>
    46. 					<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"
    47. 					 fill="#A56F34" p-id="9659">path>
    48. 					<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"
    49. 					 fill="#A56F34" p-id="9660">path>
    50. 					<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"
    51. 					 fill="#A56F34" p-id="9661">path>
    52. 					
    53. 					<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"
    54. 					 p-id="9663">path>
    55. 					<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"
    56. 					 p-id="9664">path>
    57. 					<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"
    58. 					 fill="#D83269" p-id="9665">path>
    59. 					
    60. 				g>
    61. 				
    62. 				
    63. 				 
    64. 				 
    65. 				 <g id="qiu">
    66. 					
    67. 					<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"
    68. 					   fill="#212121" p-id="9655">path>
    69. 					<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"
    70. 					   fill="#3F3F3F" p-id="9656">path>
    71. 					<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"
    72. 					    fill="#C6C5C4" p-id="9657">path>
    73. 					<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"
    74. 						 fill="#FFFFFF" p-id="9666">path>
    75. 					<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"
    76. 						  fill="#3F3F3F" p-id="9662">path>
    77. 				 g>
    78. 			svg>
    79. 			
    80. 			<hr >
    81. 			<button>
    82. 				发射
    83. 			button>
    84. 			<script type="text/javascript">
    85. 				var qiu = document.querySelector("#qiu")
    86. 				console.log([qiu])
    87. 				qiu.style.display = "none";
    88. 				var btn = document.querySelector("button")
    89. 				btn.onclick = function(){
    90. 					qiu.style.display = "block";
    91. 					var x = 0;
    92. 					var y = 800;
    93. 					var interId = setInterval(function(){
    94. 						x = x + 5;
    95. 						y = y - 2;
    96. 						qiu.style.transform = "translate("+x+"px,"+y+"px)";
    97. 						if(y<-400){
    98. 							clearInterval(interId)
    99. 						}
    100. 					},5)
    101. 				}
    102. 				
    103. 			script>
    104. 	body>
    105. html>

    3.2获取SVG DOM

    使用、、 标签插入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

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

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<iframe src="img/pao.svg" width="450" height="200" scrolling="no" style="border: none;">iframe>
    9. 		<button type="button">改变球的颜色button>
    10. 		<script type="text/javascript">
    11. 			var iframe = document.querySelector("iframe")
    12. 			
    13. 			console.log([iframe])
    14. 			iframe.onload = function(){
    15. 				svgDoc = iframe.contentDocument;
    16. 				console.log(svgDoc)
    17. 				
    18. 			}
    19. 			
    20. 			
    21. 			var btn = document.querySelector("button")
    22. 			btn.onclick = function(){
    23. 				var qiu = svgDoc.querySelector("[p-id='9655']")
    24. 				console.log(qiu.style.fill = "skyblue")
    25. 			}
    26. 		script>
    27. 	body>
    28. html>

    绘制条形图案例

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10. .axis {
    11.   stroke: #999;
    12.   stroke-width: 2px;
    13. }
    14.   style>
    15. head>
    16.  
    17. <body>
    18.   
    19.   <svg width="1000" height="700">
    20.     <g id="zuobiao">
    21.       
    22.       <line class="axis" x1="50" y1="600" x2="950" y2="600">line>
    23.       <path d="M 925,590 L 950,600 L 925,610">path>
    24.       <text x="920" y="630">时间text>
    25.       
    26.       <line class="axis" x1="100" y1="650" x2="100" y2="50">line>
    27.       <path d="M 90,75 L 100,50 L 110,75">path>
    28.       <text x="920" y="630">时间text>
    29.     g>
    30.     <g id="xkedu">
    31.       
    32.       <text x="50" y="70">订单text>
    33.     g>
    34.     <g id="ykedu">g>
    35.     <g id="barList">g>
    36.   svg>
    37.  
    38.   <script>
    39. // 数据 
    40. let data = [{
    41.     data: "星期一",
    42.     order: "1000"
    43.   },
    44.   {
    45.     data: "星期二",
    46.     order: "500"
    47.   },
    48.   {
    49.     data: "星期三",
    50.     order: "600"
    51.   },
    52.   {
    53.     data: "星期四",
    54.     order: "1100"
    55.   },
    56.   {
    57.     data: "星期五",
    58.     order: "700"
    59.   },
    60.   {
    61.     data: "星期六",
    62.     order: "1200"
    63.   },
    64.   {
    65.     data: "星期日",
    66.     order: "1500"
    67.   }
    68. ]
    69.  
    70. let xkedu = document.querySelector("#xkedu");
    71. let ykedu = document.querySelector("#ykedu");
    72. let barListDom = document.querySelector("#barList")
    73. let jgLength = 700 / data.length;
    74. let yLength = 450 / 15;
    75.  
    76. for (let i = 1; i <= data.length; i++) {
    77.   renderKedu(i)
    78.   console.log(i)
    79. }
    80.  
    81. for (var j = 1; j <= 15; j++) {
    82.   ykedu.innerHTML = ykedu.innerHTML +
    83.     `${600-yLength*j}" x2="120" y2="${600-yLength*j}">` +
    84.     `${600-yLength*j}">${100*(j)}`
    85. }
    86. // 创建刻度 
    87. function renderKedu(index) {
    88.   let lineDom = document.createElement("line")
    89.   console.log(jgLength)
    90.   lineDom.className = "axis";
    91.   lineDom.setAttribute("x1", 100 + jgLength * index);
    92.   lineDom.setAttribute("y1", "600");
    93.   lineDom.setAttribute("x2", 100 + jgLength * index);
    94.   lineDom.setAttribute("y2", "580");
    95.   xkedu.innerHTML = xkedu.innerHTML + lineDom.outerHTML +
    96.     `${75+jgLength*index}" y="620">${data[index-1].data}`
    97.  
    98.  
    99.   let color =
    100.     `rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)})`;
    101.   barListDom.innerHTML = barListDom.innerHTML +
    102.     `${75+jgLength*index}" y="${600-(yLength*(data[index-1].order/100))}" width="50" height="${yLength*(data[index-1].order/100)}" fill="${color}">`
    103.  
    104. }
    105.   script>
    106. body>
    107.  
    108. html>


     

  • 相关阅读:
    用树莓派USB摄像头做个监控
    数组07-滑动窗口、HashMap
    附文献！艾美捷抗人IL-17AmAb(MT44.6)未偶联相关研究
    集群方法同步执行框架 Suona
    docker 装机/卸载 Mysql
    面面面试三
    Nginx站点访问基础问题
    （附源码）计算机毕业设计SSM基于的小区物业管理系统
    .a文件和.so文件
    小程序优化实践
  • 原文地址：https://blog.csdn.net/weixin_60968779/article/details/128063664