svg之path

# svg之path

<path> 标签用来定义路径，并可以进行后续的填充，描边，以及裁剪等处理,svg:path元素的d属性，接受赋值描绘路径

<svg width="700" height="400">
	<path d="M 100,200 L200 320 400 400" stroke="red" fill="none"></path>
</svg>

path路径可简写，多个L可以只写一个L后面跟着就可以，而且坐标的xy之间可以加逗号，也可以不加

M = moveto x y 移动到某一点
L = lineto (x y)+ 将从当前操作点连线到点(x,y)
H = horizontal lineto 水平连线 x+
V = vertical lineto 垂直连线到y+
C = curveto 三次贝塞尔曲线(x1 y1 x2 y2 x y)
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc rx ry x-axis-rotation(旋转角度) large-arc-flag(0小弧1大弧) sweep-flag(镜像标志) x y 终点x和y坐标
Z = closepath 闭合

以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

# clip-path

clipPath标记的作用相当于一个蒙版，它能限制哪些地方可见，哪些地方不可见。clipPath标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来).clipPath元素需要使用clip-path属性来引用。

SVG的defs元素用于预定义一个元素使其能够在SVG图像中重复使用

<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <defs>
        <clipPath id="myClip">
            <circle cx="30" cy="30" r="20"/>
            <circle cx="70" cy="70" r="30"/>
        </clipPath>
    </defs>
    
    <rect x="10" y="10" width="100" height="100"
          clip-path="url(#myClip)" fill='red' />
    
</svg>

← svg 创建svg →