svg基础标签说明
path-路径
上⾯的基本形状其实都属于路径的⼀个延伸，都是基于 path 实现的。
path 有很多的语法属性，可以⾃定义实现复杂的形状。
其中坐标点有多种写法，且绘制属性不区分⼤⼩写。
逗号分割坐标点：x1 y1 , x2 y2
⽆逗号：x1 y1 x2 y2
逗号分隔 x y ：x1,y1 x2,y2
M/m
语法：M x y | m x y | m x,y
描述：定义起始点，没什么效果
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M 10 10"/>
</svg>
L/l
语法：L x y
描述：画线段，移动到某⼀坐标，可以使⽤ m 重新定义起点
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M 10 10 L 10 50 L 50 50 L 100 80 M 100 100 L 180 50" stroke="#000" fill="none"/>
</svg>
H/h
语法：H x
描述：画⼀条横线
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M 50 50 H 150" stroke="#000" fill="none"/>
</svg>
V/v
语法：V y
描述：画⼀条竖线
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M 100 10 v 120" stroke="#000" fill="none"/>
</svg>
Z/z
语法：Z
描述：标⽰结束，并且和开始的点连起来
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="m 10 10 h 10 v 10 l 50 0 v 50 z" stroke="#000" fill="orange" stroke-width="3"/>
</svg>
命令名称参数
M moveto  移动到(x y)+
Z closepath  关闭路径(none)
L lineto  画线到(x y)+
H horizontal lineto  ⽔平线到x+
V vertical lineto  垂直线到y+
C curveto  三次贝塞尔曲线到(x1 y1 x2 y2 x y)+
S smooth curveto  光滑三次贝塞尔曲线到(x2 y2 x y)+
Q quadratic Bézier curveto  ⼆次贝塞尔曲线到(x1 y1 x y)+
T smooth quadratic Bézier curveto  光滑⼆次贝塞尔曲线到(x y)+
A elliptical arc  椭圆弧(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R Catmull-Rom curveto*  Catmull-Rom曲线x1 y1 (x y)+
SVG中的路径数据，即path元素的 d 属性，有⼀系列的路径绘制指令，其中椭圆弧指令(A)最复杂，不算椭圆弧起始点的x,y坐标的话，依然有 7 个参数。
SVG椭圆弧指令的参数，与Canvas等圆弧指令的参数有很⼤差别，Canvas中使⽤圆⼼、半径、起始⾓度、结束⾓度等为参数，⽽SVG使⽤起始点坐标、半径、⽅向、结束点坐标等为参数。
SVG之所以实现为这样的参数形式，是因为SVG中的路径包含的每段⼦路径具有依次⾸尾相连的特性，这样每⼀段路径绘制的起点终点就⽐较明确直观。
SVG椭圆弧路径指令说明：
指令 A (绝对) a (相对)
名称 elliptical arc 椭圆弧
参数
(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
rx ry 是椭圆的两个半轴的长度。
x-axis-rotation 是椭圆相对于坐标系的旋转⾓度，⾓度数⽽⾮弧度数。
large-arc-flag 是标记绘制⼤弧(1)还是⼩弧(0)部分。
sweep-flag 是标记向顺时针(1)还是逆时针(0)⽅向绘制。
x y 是圆弧终点的坐标。
描述从当前点绘制⼀段椭圆弧到点 (x, y)，椭圆的⼤⼩和⽅向由 (rx, ry) 和 x-axis-rotation 参数决定， x-svg和canvas的区别
axis-rotation 参数表⽰椭圆整体相对于当前坐标系统的旋转⾓度。椭圆的中⼼坐标 (cx, cy) 会⾃动进⾏计算从⽽满⾜其它参数约束。large-arc-flag 和 sweep-flag 也被⽤于圆弧的计算与绘制。
实例：
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
————————————————

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