HTML5学习(3) SVG的学习及应用六 路径(复杂图形的实现)
2012-08-20 15:04
162 查看
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//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"> <!--moveto(250,50) lineto(150,150) lineto(350,150) close--> <path d="M250 50 L150 150 L350 150 Z" /> <path d="M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 C186 384 211 361 211 334 C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/> <!-- 可以用于路径的命令 M = moveto (起点,移动) L = lineto (连线) H = horizontal lineto (水平线) V = vertical lineto (虚线) C = curveto (曲线) S = smooth curveto (流畅曲线) Q = quadratic Belzier curve (二次Belzier曲线) T = smooth quadratic Belzier curveto (二次Belzier流畅曲线) A = elliptical Arc (椭圆弧) Z = closepath (结束) --> </svg>
路径:
标签:<path>
属性:d(命令集合)
相关文章推荐
- HTML5学习(3) SVG的学习及应用二(椭圆)
- HTML5学习(3) SVG的学习及应用三 线条
- HTML5学习(3) SVG的学习及应用四 多边形
- HTML5学习(3) SVG的学习及应用一 矩形及圆
- HTML5学习(3) SVG的学习及应用五 多点连线
- html5 canvas学习--设置图形的透明度
- WCF学习之旅—实现支持REST客户端应用(二十四)
- C#数据结构和算法学习系列六----堆栈、堆栈的实现和应用
- DayDayUp之HTML5学习笔记 二 使用header、aside、section、footer实现一个简单的界面
- Chrome中利用HTML5实现具有文件“编辑”及“下载”功能的本地应用
- HTML5 学习---------(SVG 基础)
- 数据可视化的实现技术和工具比较(HTML5 canvas(Echart)、SVG、webGL等等)
- html5 学习之路 四 (应用缓存 、web worker 、服务器推送)
- QT中由图形生成SVG文件实现方案
- D3.js学习笔记一:认识SVG图形
- ESB实现SOA 企业复杂应用集成的解决措施(2)
- 数据结构之栈复杂数据应用实现(2)
- QT中由图形生成SVG文件实现方案
- 使用snap.svg实现svg路径描边动画
- IOS学习笔记32—使用Storyboard实现复杂界面