【前端数据可视化】svg基础指令
SVG是⼀种基于 XML 的图像⽂件格式，它的英⽂全称为Scalable Vector Graphics，意思为可缩放的⽮量图形
  基本的 SVG 元素
你可以深⼊ SVG 复杂的细节，但这对我们即将创建的图标不是必须的。以下列表涵盖了我们将⽤到的构建块。
<svg>包裹并定义整个⽮量图。<svg>标签之于⽮量图就如同<html>标签之于⼀个 web 页⾯。
<line>创建⼀条直线。
<polyline>创建折线。
<rect>创建矩形。
<circle>创建圆。
<ellipse>创建圆和椭圆。
<polygon>创建多边形。
<path>通过指定点以及点和点之间的线来创建任意形状。
  详细使⽤
所有标签都要包裹在<svg>中使⽤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<!-- svg双闭合标签：默认宽度与⾼度300 * 150  svg绘制图形务必在svg标签内部使⽤绘制图形 -->
<svg class="box">
<!-- x1 y1第⼀个点的坐标  x2 y2 第⼆个点的坐标 -->
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
<line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
<!-- 绘制折线：可以多个点，多个点的时候，最好带有逗号 -->
<polyline points="300 300, 50 100, 120 400,20,20" fill-opacity="0" stroke="cyan"></polyline>
<!-- 绘制矩形 -->
<!-- fill属性：设置填充颜⾊的  fill-opacity设置填充颜⾊的透明度  stroke：线的颜⾊ -->
<rect x="400" y="400" width="150" height="50" fill="pink"></rect>
<!-- 绘制圆形 -->
<circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'></circle>
<!-- 绘制圆形|椭圆 -->
<ellipse cx="500" cy="500" rx="100" ry="50" ></ellipse>
<!-- 多边⾏ -->
<polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0"/>
<!-- 绘制任意图形 -->
<path fill-opacity="0" stroke="skyblue" d="        M 10  10
L 20 400
L 30 120
L 40 66
L 50 99
L 60 120
L 70 99
Z
svg图形
"></path>
</svg>
</body>
</html>
svg基础使⽤代码
1. <line>
1 2 3 4 5<!--
x1 y1 是第⼀个点坐标
x2 y2 是第⼆个点坐标
-->
<line x1=""y1=""x2=""y2=""></line>
2. <polyline> 1
2 3 4 5 6 7 8 9 10 11 12 13<!--
依次传⼊点坐标，即可绘制
-->
<polyline points="
x1 y1
x2 y2
x3 y3
...
"></polyline>
<!-- 你也可以把上⾯的代码写成： -->
<polyline points="x1 y1, x2 y2, x3 y3"></polyline> <!-- 或 -->
<polyline points="x1 y1 x2 y2 x3 y3"></polyline>
3. <rect>
1 2 3 4 5 6<!--
x y 左上⾓点坐标
width 宽度
height ⾼度
-->
<rect x=""y=""width=""height=""></rect>
4. <circle>
1 2 3 4 5 6<!--
cx cy 圆⼼点坐标
r 半径
style 样式
-->
<circle cx='70'cy='95'r='50'style='stroke:black; fill:none'></circle>
5. <ellipse> 1<!--
2 3 4 5 6  cx cy 圆⼼点坐标
rx x轴半径
ry y轴半径
-->
<ellipse cx=""cy=""rx=""ry=""></ellipse>
6. <polygon>
1<polygon points="x1 y1, x2 y2, x3 y3"/> 
7. <path>
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15<!--
M 移动到初始位置
L 画线
Z 将结束和开始点闭合-->
<path d="
M x1 y1
L x2 y2
L x3 y3
L x4 y4
L x5 y5
L x6 y6
L x7 y7
Z
"></path>
  起始⽂件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hand Coded SVG</title>
<style>
html,
body {
height: 100%;
width: 100%;
background: #e9e9e9;
}
body {
margin: 0;
text-align: center;
}
.grid {
width: 750px;
height: 500px;
margin: 0 auto;
padding-top: 100px;
padding-left: 100px;
background-image: url('grid.png');
position: relative;
}
.grid::before {
content: "";
border-left: 1px solid #7c7cea;      position: absolute;
top: 0;
left: 100px;
width: 750px;
height: 600px;
}
.grid::after {
content: "";
border-top: 1px solid #7c7cea;      position: absolute;
top: 100px;
left: 0;
width: 850px;
height: 500px;
}
svg {
stroke: #000;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
</style>
</head>
<body>
<div class="grid">
</div>
</body>
</html>
起始⽂件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。