木叶村是火之国首都，是《火影忍者》动画开始的地方，是木叶忍者世世代代守护的地方！众所周知在火影忍者里面每一个国家都有他们自己的标志，就跟现实中每个国家都是自己独特的国旗一样，他们具有代表性，看到国旗就能知道这个国旗是属于那个国家的！
今天上班我偷偷用手机追了下火影忍者，被前端女上司发现了，也不知道女上司抽什么风，让我用svg画一个木叶，所以我今天就尝试用svg来画一个木叶村的标志。在画木叶村标记之前，我学习了svg 有一些预定义的形状元素，可被开发者使用和操作：
矩形<rect>
圆形<circle>
椭圆<ellipse>
线<line>
折线<polyline>
多边形<polygon>
路径<path>
我踏马观察了木叶图标：
首先右上角和左下角都是直线，可以用line来实现，创建一个svg元素，然后写入svg统一格式标签定义。
<?xmlversion="1.0" standalone="no"?>
<!DOCTYPE svgPUBLIC "-//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">
</svg>只需要在svg标签里面进行svg形状的操作就可以画出想要的svg图案了。分析右上的脚和左下三角的关系。废话不多话，先画好正方形，然后画对角线，正方形的话，svg已经提供了形状“Rect”，正方形的x，y是： x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是0px） y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是0px）。
<rect x="420" y="150"width="400" height="400"/>
这段代码就是浏览器的x:420、y:150为中心画一个长高都为400像素的正方形，svg默认的填充颜色是黑色，我们需要修改svg的正方形样式。
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）；CSS 的 stroke-width 属性定义矩形边框的宽度；CSS 的 stroke 属性定义矩形边框的颜色。根据CSS样式，只需要设置fill为白色，Stroke为红色。
<rect x="420" y="150"width="400" height="400" style="fill:white;stroke:red"/>
接下来，需要画对角线！这里需要获取左下的坐标和右上的坐标，对角线就可以使用svg提供的线条Line了，Line的属性介绍如下：
x1 属性在 x 轴定义线条的开始；y1 属性在 y 轴定义线条的开始；x2 属性在 x 轴定义线条的结束；y2 属性在 y 轴定义线条的结束。
根据图片分析：
<line x1="220" y1="350" x2="620"y2="-50" style="stroke:red"/>
突然发现对角线根本没有对准两个点，难道是我计算错误？因为线条不像正方形一样可以设置中心点的概念，所以需要两边的XY坐标都加上200的像素。
<line x1="420" y1="550" x2="820"y2="150" style="stroke:red"/>
效果如图：
好了，现在算是把最基础的正方形和对角线搞定了，等下继续我的木叶村烦恼！