SVG中的路径

1、使用moveto与lineto

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="150px" height="150px" viewBox="0 0 150 150">
    <g style="stroke:black;fill:none;">
        <!--一条线 -->
        <path d="M 10 10 L 100 10"/>
        <!-- 一个直角 -->
        <path d="M 10,20 L 100,20 L 100,50"/>
        <!-- 两个30度角 -->
        <path d="M 40 60 L 10 60 L40 42.68 M 60 60 L 90 60 L 60 42.68"/>
    </g>
</svg>

2、使用closepath

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="150px" height="150px" viewBox="0 0 150 150">
    <g style="stroke:black;fill:none;" transform="scale(5)">
        <!-- 四条线形式的矩形 -->
        <path d="M 10 10 L 40 10 L 40 30 L 10 30 L 10 10"/>
        <!-- closepath绘制的矩形 -->
        <path d="M 60 10 L 90 10 L 90 30 L 60 30 Z"/>
        <!-- 绘制两个三角形 -->
        <path d="M 40 60 L 10 60 L 40 42.68 Z M 60 60 L 90 60 L 60 42.68 Z"/>
    </g>
</svg>

3、相对moveto和lineto

小写为相对坐标，大写为绝对坐标，moveto小写位于首位时为绝对坐标，closepath大小写效果相同

<svg xmlns="http://www.w3.org/2000/svg">
    width="150px" height="150px" viewBox="0 0 150 150">
    <path d="M 10 10L 20 10 L 20 30 M 40 40 L 55 35"
          style="stroke:black;fill:none;" transform="scale(3)"/>
    <path d="M 10 10 l 10 0 l 0 20 m 20 10 l 15 -5"
          style="stroke:black;fill:none;" transform="translate(100,0) scale(3)"/>
</svg>

4、路径的快捷方式

<svg xmlns="http://www.w3.org/2000/svg">
    width="150px" height="150px" viewBox="0 0 150 150">
    <g style="stroke:black;fill:none;">
        <path d="M 30 30 L 55 5 L 80 30 L 55 55 Z" transform="translate(0,0) scale(3)"/>
        <path d="M 30 30 L 55 5 80 30 55 55 Z" transform="translate(160,0) scale(3)"/>
        <path d="M 30 30 55 5 80 30 55 55 Z" transform="translate(320,0) scale(3)"/>
        <path d="m 30 30 l 25 -25 25 25 -25 25 z" transform="translate(480,0) scale(3)"/>
        <path d="m 30 30 25 -25 25 25 -25 25 z" transform="translate(640,0) scale(3)"/>
        <path d="M30 30 55 5 80 30 55 55Z" transform="translate(0,160) scale(3)"/>
        <path d="m30 30 25-25 25 25-25 25z" transform="translate(160,160) scale(3)"/>
    </g>
</svg>

5、椭圆弧

圆弧命令以字母A（绝对坐标）或者a（相对坐标）开始，后面紧跟7个参数

• 点所在椭圆的x半径和y半径
• 椭圆的x轴旋转角度x-axis-rotation
• large-arc-flag，如果需要圆弧的角度小于180°，其为0；如果需要圆弧的角度大于或等于180°，则为1
• sweep-flag，如果需要弧以负角度绘制则为0，以正角度绘制则为1
• 终点的x坐标和y坐标（起点由左后一个绘制的点或者左后一个moveto命令确定

<svg xmlns="http://www.w3.org/2000/svg">
    width="150px" height="150px" viewBox="0 0 150 150">
    <g style="stroke:black;fill:none;">
        <!-- 灰色投影 -->
        <ellipse cx="154" cy="154" rx="150" ry="120" style="fill:#999999;"/>
        <!-- 浅蓝色椭圆 -->
        <ellipse cx="152" cy="152" rx="150" ry="120" style="fill:#cceeff;"/>
        <!-- 浅红色大半圆填充符号的上半部分，其下方“侵入”符号左下方的浅红色小半圆 -->
        <path d="M 302 152 A 150 120 0 1 0 2 152 A 75 60 0 1 0 152 152" style="fill:#ffcccc;"/>
        <!--浅蓝色小半圆，填充符号右上方 -->
        <path d="M 152 152 A 75 60 0 1 1 302 152" style="fill:#cceeff;"/>
    </g>
</svg>

6、填充规则

<svg xmlns="http://www.w3.org/2000/svg">
    width="150px" height="150px" viewBox="0 0 150 150">
    <g style="stroke:black;fill:green" fill-rule="nonzero" transform="translate(50,50) scale(2)">
        <!-- 顺时针方向的路径 -->
        <path d="M 0 0 60 0 60 60 0 60 Z M 15 15 45 15 45 45 15 45 Z"/>
    </g>
    <g style="stroke:black;fill:green" fill-rule="evenodd" transform="translate(200,50) scale(2)">
        <!-- 顺时针方向的路径 -->
        <path d="M 0 0 60 0 60 60 0 60 Z M 15 15 45 15 45 45 15 45 Z"/>
    </g>
    <g style="stroke:black;fill:green" fill-rule="nonzero" transform="translate(50,200) scale(2)">
        <!-- 外部路径为顺时针方向，内部路径为逆时针方向 -->
        <path d="M 0 0 60 0 60 60 0 60 Z M 15 15 15 45 45 45 45 15 Z"/>
    </g>
    <g style="stroke:black;fill:green" fill-rule="evenodd" transform="translate(200,200) scale(2)">
        <!-- 外部路径为顺时针方向，内部路径为逆时针方向 -->
        <path d="M 0 0 60 0 60 60 0 60 Z M 15 15 15 45 45 45 45 15 Z"/>
    </g>
</svg>

7、<marker>元素

<svg xmlns="http://www.w3.org/2000/svg">
    width="200px" height="200px" viewBox="0 0 200 200">
   <defs>
       <marker id="mCircle" markerWidth="10" markerHeight="10" refX="5" refY="5">
           <circle cx="5" cy="4" r="3" style="fill:none;stroke:black;"/>
       </marker>
       <marker id="mArrow" markerWidth="4" markerHeight="8" refX="0" refY="4" orient="auto">
           <path d="M 0 0 4 4 0 8" style="fill:none;stroke:black;"/>
       </marker>
       <marker id="mTriangle" markerWidth="5" markerHeight="10" refX="5" refY="5" orient="auto">
           <path d="M 0 0 5 5 0 10 Z" style="fill:black;"/>
       </marker>
   </defs>
    <path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
          style="marker-start:url(#mCircle);
          marker-mid:url(#mArrow);
          marker-end:url(#mTriangle);
          fill:none;stroke:black;"/>
    <path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
          transform="translate(150,0)"
          style="marker:url(#mCircle);
          fill:none;stroke:black;"/>
</svg>