[翻译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>

 

效果图

[翻译svg教程]Path元素 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这点结束,效果图如下
[翻译svg教程]Path元素 svg中最神奇的元素!
大些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>

结果如下

[翻译svg教程]Path元素 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;"/>
蓝色

效果如下

[翻译svg教程]Path元素 svg中最神奇的元素!

太复杂了晕了。。。。

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

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

上一篇:Linux下Nagios的安装与配置[转]


下一篇:C字符串处理函数