svg
svg: scalable vector graphics ,可缩放的矢量图
- 首先得在VSCode安装插件SVG,书写先使用尖括号+元素+tabulator自动生成
- 该图片使用代码书写组成
- 缩放不会失真
- 内容轻量
怎么使用
svg可以嵌入浏览器,也可以单独成为一个文件
xml语言,svg使用该语言定义
书写svg代码
矩形:rect
圆形:circle
椭圆:ellipse
线条:line
折线:polyline
可以由多条线构成,折线构成的填充区域是起始点与终点相连,可设置为none
多边形:polygon
路径:path
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
A半径1 半径2 顺时针旋转角度 小弧(0)或大弧(1) 顺时针(1)或逆时针(0)
Z = closepath
注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" type="image/x-icon" href="imgs/bd2.ico">
</head>
<body>
<img src="test1.svg" alt="">
</body>
</html>
添加css样式:
<svg style="background:gray;" width="500" height="1000" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" x="100" y="100" fill="red" stroke="#000" stroke-width="5" />
<circle cx="200" cy="400" r="50" fill="transparent" stroke="#000" stroke-width="5" />
<ellipse rx="80" ry="30" cx="200" cy="500" fill="red" stroke="#fff" stroke-width="5" />
<line x1="10" x2="10" y1="300" y2="30" stroke="#000" stroke-width="5" />
<polyline points="300,100,350,100,350,150,400,150,400,200" fill="none" stroke="#000" stroke-width="5" />
<polygon points="300,300,400,400,300,500" fill="none" stroke="#000" stroke-width="5" />
<path d="M150 600 L300 600 L300 800 L150 800 z" fill="red" style="stroke:#000; stroke-width:5" />
<path d="M300 300 A150 150 0 1 0 450 150 " fill="none" style="stroke:#000; stroke-width:3" />
</svg>
例子:八卦图
添加css样式:
<svg style="background:#ccc;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<!-- <circle cx="250" cy="250" r="200" fill="none" stroke="#999" stroke-width="2" /> -->
<path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50" fill="#000" />
<path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50" fill="#fff" />
<circle cx="250" cy="150" r="30" fill="#fff" />
<circle cx="250" cy="350" r="30" fill="#000" />
</svg>