[翻译svg教程]Path元素 svg中最神奇的元素！
先看一个实例
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M50,50
A30,30 0 0,1 35,20
L100,100
M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
</svg>
效果图
看效果图有两条直线和一条曲线 但是代码里面只有一个path 是不是很神奇！
在path 元素中，所有和绘制有关的命令都在d这个属性中
在实例中 M 表示移动画笔的命令
A 表示用画笔画圆的命令
L 表示用画笔画直线的命令
设置和移动画笔
在绘制时候，第一个命令永远都是 M 移动命令，你想要绘制任何图形，首先你要移动画笔到某一个地方，M命令就是移动的命令
例如这个例子
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M50,50"
style="stroke:#660000; fill:none;"/>
</svg>
这个例子把画笔移动到了50,50这点，下次绘制将从此开始。
画直线
我的智商只会画直线，所以先看看如何画直线
画直线也是在path中最简单的命令，用L或者l就可以画直线
例如
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M50,50
L100,100"
style="stroke:#660000; fill:none;"/>
</svg>
这个例子从50 50 这点开始画线到100,100这点结束，效果图如下
大些L和小写的L的区别在哪呢
L 是绝对定位
l 是相对定位
绘制中需要移动画笔
绘制的图形总是从上一次结束的那个点开始绘制，链接到新的点，每一个绘制命令都是执行一个绘制命令后，拿到一个结束的点，画笔绘制移动到最后的一个点上，下一次绘制将从这个点开始。
画弧线
通过path 元素画圆，使用命令 A或者a,和画线类似，A表示绝对坐标 a表示 相对坐标
例如
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M50,50
A30,50 0 0,1 100,100"
style="stroke:#660000; fill:none;"/>
</svg>
结果如下
这个例子 从点 50,50 到点100,100 画了个曲线（圆的一部分）
A30,50 0 0,1 100,100 这几个参数含义的解释
第一个参数：rx (radius in x-direction) x方向的半径
第二个参数：ry (radius in y-direction) y方向的半径
如果两个参数一样的话就是 圆弧 如果不相等就是椭圆弧
第三个参数：x-axis-rotation 个人理解是内弧线还是外弧线，内弧线面积值为0 外弧线值为1
第四个参数：large-arc-flag determines whether to draw the smaller or bigger arc satisfying the start point
第五个参数sweep-flag 个人理解 相对平滑的弧线开关 就是一个圆分两半 选择弧线平滑的方向
代码如下
<path d="M40,20 A30,30 0 0,0 70,70"
style="stroke: #cccc00; stroke-width:2; fill:none;"/>
黄色
<path d="M40,20 A30,30 0 1,0 70,70"
style="stroke: #ff0000; stroke-width:2; fill:none;"/>
红色
<path d="M40,20 A30,30 0 1,1 70,70"
style="stroke: #00ff00; stroke-width:2; fill:none;"/>
绿色
<path d="M40,20 A30,30 0 0,1 70,70"
style="stroke: #0000ff; stroke-width:2; fill:none;"/>
蓝色
效果如下
太复杂了晕了。。。。
还有更复杂的，我看晕了。。。
test
