[翻译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;"/>

蓝色

效果如下

太复杂了晕了。。。。

还有更复杂的，我看晕了。。。

http://tutorials.jenkov.com/svg/path-element.html