svg学习(九)path
<path> 标签用来定义路径。
下面的命令可用于路径数据:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
- <?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">
- <path d="M250 150 L150 350 L350 350 Z" />
- </svg>
上面的例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。
下面的例子创建了一个螺旋:
- <?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">
- <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"/>
- </svg>
svg学习(九)path的更多相关文章
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- [翻译svg教程]svg学习系列 开篇
目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...
- SVG 学习(一)
SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gr ...
- SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<四> 基础API
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<三>渐变
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<一>基础图形及线段
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
随机推荐
- 作弊Q-百威
===_=374793763===_= 2652880032 865580818 大康 2652880032 春牛 3479301404 皮卡丘 3242026908 舍得放手
- Struts2 整合Spring(Maven,注解版)
这两天正在试验Struts2与Spring框架的整合,和他们各自的“注解”.今天就总结一下这两个框架怎么用注解进行整合. 一,加入两者的依赖包,除了两者的必要依赖外,还需要导入struts2-spri ...
- SqlBluckCopy 保存大数据
DataTable dt = new DataTable(); dt.Columns.Add("UserName", typeof(string)); dt.Columns.Add ...
- javascript学习之通过class获取元素
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript 函数声明,函数表达式,匿名函数,立即执行函数之区别
函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...
- php如何查看变量是真实被引用
$var1 = 'Hello World'; $var2 = ''; $var2 =&$var1; debug_zval_dump(&$var1); $a = "aaa&qu ...
- jQuery简单易用的网页内容打印插件
简要教程 jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件.该网页打印插件可以打印指定区域的网页元素,可以指定跳过不打印某些元素,还可以打印整个页面内容.并且提供了丰富的 ...
- Neil·Zou 语录一
1 既然选择了远方 Since I’ve chosen to go far 便只顾风雨兼程 I will just walk down the path I chose step by ste ...
- java synchronized详解
Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchronized(this ...
- 深入理解ANGULARUI路由_UI-ROUTER
最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研究下,做个笔记,其中大部分为摘抄别人的,做个说明免得被人吐槽. Angularjs ui-router - ...