SVG中path标签的简单使⽤
path标签概述
他是由命令及其参数组组成的字符串，如：
<path d="M0,0L10,20C30-10,40,20,100,100"stroke="red">
命名规范
区分⼤⼩写：⼤写表⽰坐标参数为绝对位置，⼩写则为相对位置
最后的参数表⽰最终要到达的位置
上⼀个命令结束的位置就是下⼀个命令开始的位置
命令可以重复参数表⽰重复执⾏同⼀条命令
命令简介
M (x, y)+ 移动画笔，后⾯如果有重复参数，会当做是 L 命令处理
L (x, y)+ 绘制直线到指定位置
H (x)+ 绘制⽔平线到指定的 x 位置
V (y)+ 绘制竖直线到指定的 y 位置
m、l、h、v 使⽤相对位置绘制
命令含义
M/m (x,y)+移动当前位置
L/l (x,y)+从当前位置绘制线段到指定位置
H/h (x)+从当前位置绘制⽔平线到达指定的 x 坐标
V/v (y)+从当前位置绘制竖直线到达指定的 y 坐标Z/z闭合当前路径C/c (x1,y1,x2,y2,x,y)+从当前位置绘制三次⻉塞尔曲线到指定位置S/s (x2,y2,x,y)+从当前位置光滑绘制三次⻉塞尔曲线到指定位置
S/s (x2,y2,x,y)+从当前位置光滑绘制三次⻉塞尔曲线到指定位置命令含义
Q/q (x1,y1,x,y)+从当前位置绘制⼆次⻉塞尔曲线到指定位置T/t (x,y)+从当前位置光滑绘制⼆次⻉塞尔曲线到指定位置A/a (rx,ry,xr,laf,sf,x,y)从当前位置绘制弧线到指定位置
移动与直线类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
svg{
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<svg>
<!--
d 定义路径，是⼀些列的命令集合
M/m（x,y）定义起始点，没有什么效果
-->
<path d='M20,20'stroke='red'></path>
<!--
L/l 绘制线段(x,y)+
L 绝对位置，绘制线段，移动到某⼀处坐标，可以使⽤M重新定义起点    l 相对位置，绘制线段，移动到某⼀处坐标，可以使⽤m重新定义起点  -->
<path d='M20,20 L10,50 M30,30 L50,50'stroke='red'></path>
<path d='m20,20 l10,50 m30,30 l50,50'stroke='blue'></path>
</svg>
<svg>
<!--
路径命令：⼩写是相对位置，⼤写是绝对位置
H/h（x）⽔平⽅向绘制直线
-->
svg图形<path d='m20,20 h50,150 'stroke='red'></path>
<!-- 结合L命令⼀起使⽤
多个命令，要⽤m移动到另⼀端使⽤
-->
<path d='m20,50 h150 m50,50 l150,100'stroke='green'></path>
<!-- 垂直⽅向绘制线段
V /v(y)+ 绘制竖直线到指定的 y 位置
-->
<path d='m100,60 v 120'stroke='green'></path>
</svg>
<svg>
<!--
z 闭合当前路径
表⽰结束，并且和开始的起点连起来
-->
<path d="m30,100 h10 l50 0 v50 z"stroke='orange'fill="none"></path> </svg>
</body>
</html>
贝塞尔曲线
⼆次
⼆次
三次
光滑曲线
贝塞尔图形
C与S

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