[翻译svg教程]Path元素 svg中最神奇的元素!
2015-04-25 10:43
197 查看
先看一个实例
效果图
例如这个例子
这个例子把画笔移动到了50,50这点,下次绘制将从此开始。
画直线也是在path中最简单的命令,用L或者l就可以画直线
例如
例如
结果如下
这个例子 从点 50,50 到点100,100 画了个曲线(圆的一部分)
A30,50 0 0,1 100,100 这几个参数含义的解释
第一个参数:
第二个参数:
如果两个参数一样的话就是 圆弧 如果不相等就是椭圆弧
第三个参数:
[code]第四个参数:
效果如下
太复杂了晕了。。。。
还有更复杂的,我看晕了。。。
http://tutorials.jenkov.com/svg/path-element.html
<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
[code]第四个参数:
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
相关文章推荐
- [翻译svg教程]svg中矩形元素 rect
- [翻译svg教程]svg中的circle元素
- [翻译svg教程]svg 中的g元素
- [svg翻译教程]椭圆(ellipse元素)和线(line元素)
- SVG Path高级教程
- [翻译svg教程]svg学习系列 开篇
- SVG基础 | SVG PATH 元素
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- xml矢量图:svg的path元素
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- 如何动态向HTML中插入SVG元素(包括Line,path,marker..等)
- Html5添加块级元素转换为不同形状的SVG图形的jquery插件教程
- Android SVG动画PathView源码解析与使用教程(API 14)
- [svg 翻译教程]Polyline(折线)polygon(多边形)
- 【翻译svg教程 】svg 的坐标系统
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- SVG 形状元素(rect、circle、ellipse、line、polyline、polygon、path)
- SVG path 元素详解
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素