1、SVG的特点
官方文档:https://www.runoob.com/svg/svg-tutorial.html
SVG是(scalable vector graphics)的缩写,翻译为可缩放的矢量图。值得一提的是,svg并不是HTML5的新增元素,SVG使用的是xml来描述图形,所以SVG图形也可以是独立的文件。
SVG默认为内联。 将display: block添加到它,然后margin: auto
SVG的特点:
- 图像可伸缩,放大缩小不会影响图像质量
- 使用xml定义,容易读取和修改
- 和jpeg gif图像相比尺寸更小,更容易压缩
- 可以与其他技术运行
2、SVG画画,矢量图形,通过形状坐标数字在浏览器渲染图形
text(文本)
<text x="10" y="15">I love SVG</text>
rect(矩形)
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
circle(圆)
<circle cx="100" cy="50" r="100" fill='#f06'/> //cx表示圆心横坐标,cy表示圆心纵坐标,r表示半径
ellipse(椭圆)
<ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/> cx表示圆心横坐标,cy表示圆心纵坐标,rx表示横向半径,ry表示纵向半径
line(直线)
<line x1="0" y1="100" x2="100" y2="0"/>
polyline(折线)
<polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>
polygon(多边形)
<polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>
path(路径)路径是SVG中最强大的图形,是由一系列命令组成
命令 名称 参数
M moveto 移动到 (x y)+
Z closepath 关闭路径 (none)
L lineto 画线到 (x y)+
H horizontal lineto 水平线到 x+
V vertical lineto 垂直线到 y+
A elliptical arc椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
C curveto 三次贝塞尔曲线到 (x1 y1 x2 y2 x y)+
S smooth curveto光滑三次贝塞尔曲线到 (x2 y2 x y)+
Q Bézier curveto二次贝塞尔曲线到 (x1 y1 x y)+
<path d="M150 0 L75 200 L225 200 Z" fill="red" stroke="blue" stroke-width="10"/>
fill(填充颜色)
fill-opacity(填充透明度)
stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]
stroke-dasharray:通过实线虚线控制画
stroke-dashoffset:计算偏移量
3、SVG 路径=例子
元素用于定义一个路径
下面的命令可用于路径数据:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意: 以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
三角形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
上下三角行
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 13L11 9H5L8 13Z" fill="#9DA8BB"></path>
<path d="M8 3L11 7H5L8 3Z" fill="#9DA8BB"></path>
</svg>
注:调节三角号大小可用
transform:scale(2)
斜线(上下平齐)
<svg xmlns="http://www.w3.org/2000/svg" >
<polygon points="0,0 20,0 80,80 60,80 " stroke="#0052D9"/>
</svg>