svg的path标签

<path> 标签用来定义路径。

下面的命令可用于路径数据:


       M = moveto(M X,Y) :将画笔移动到指定的坐标位置
   L = lineto(L X,Y) :画直线到指定的坐标位置
   H = horizontal lineto(H X):画水平线到指定的X坐标位置
   V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
   C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
   S = smooth curveto(S X2,Y2,ENDX,ENDY)
   Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
   T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
   A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
   Z = closepath():关闭路径

案例 1:
<span style="font-size:14px;"><svg width="100%" height="100%" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">

    <path d="M 100 100 L 300 100 L 200 300 z"
          fill="orange" stroke="black" stroke-width="3" />
</svg></span>
案例 2:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>



猜你喜欢

转载自blog.csdn.net/leixu1027/article/details/52511325