木叶图标看似简单，想要画好确实需要花点心思，就像要搞定女上司一样，不是那么容易的。女上司问我木叶进度，我解释半天，我也是第一次实操svg，可女上司说她只要一个结果，下班之前画完。
上次画完得出一个矩形和一条对角线，木叶的前边类似一个箭头，我需要再画两条线，我先加两条不同颜色的线条：
<line x1="420" y1="550" x2="470" y2="350" style="stroke:blue"/><line x1="420" y1="550" x2="620" y2="550" style="stroke:blue"/>
继续观察木叶，中间应该是几个圆圈，圈圈圆圆圈圈。我先加一个圆圈看一下效果，然后再调增：
<circle cx="645" cy="375" r="175" stroke="black" stroke-width="2" fill="white"/>
反复圈圈圆圆圈圈，貌似离真相越来越近：
好像形状已经出来了，现在我需要考虑多余得线怎么办？我第一时间想到的是屏蔽掉（思路：使用白线的rect应该就能屏蔽），在这之前，我得把红色得辅助线去掉。
<rect x="620" y="450" width="100" height="100"style="fill:white;stroke:white"/>
目测可以达到我们想要得屏蔽效果！观察了原图发现，我如果这样实现下去会很麻烦，所以我打算采用后面得path，但是上面得打型很重要的！Path 标签的d属性可用值如下：
M=移动到
L=线路至
H=水平线至
V=垂直线至
C=曲线
S=平滑曲线
Q=二次B_zier曲线
t=平滑二次b_zier曲线
A=椭圆弧
Z=闭合路径
目前我们应该只会用到L直线和A椭圆弧，A是这里面最复杂的，一共有7个属性：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 是圆弧终点的坐标。把弧线按前边的打图走位搞清楚，再配合M移动、L线路就ok了：
<path d="M760 505 A 175 175 0 0 1 645 550 L420 550 L470 350 M470 350 A 175 175 0 0 1 745 230 L820 150M470 350 A 175 175 0 0 0 645 550M760 505 A 145 145 0 0 0 580 279M580 279 A 110 110 0 0 0 660 478M660 478 A 80 80 0 0 0 690 335M690 335 A 80 80 0 0 0 630 325M630 325 A 60 60 0 0 0 585 375" stroke="red" fill="none" stroke-width="2" />
感觉线条有点细，设置了stroke-width="10"为10PX，效果如图：
