6. svg学习笔记-路径
路径相比于多边形<polygon>元素具有更强绘图能力,<polygon>元素可以绘制任意的多边形,而路径可以绘制任意的轮廓线,是线段,曲线,圆弧的组合形式。svg中可以使用<path>元素绘制路径,所有描述轮廓线的数据都放在d属性中,并且所有的路径必须以moveto命令开始,命令以大写的M开始,后面跟着用空格或者逗号分隔的x坐标和y坐标,例如:
<path d="M 10,10 L 110,130" stroke="black"></path>
上面的代码相当于
<line x1="10" y1="10" x2="110" y2="130" stroke="black"></line>
绘制一条从(10,10)到(110,130)的线段,其中的L表示lineto命令,接下来会有详解
绘制线段
在路径中绘制直线的命令是lineto命令,在d属性中以大写L或者小写l表示,大写的L表示绝对坐标,小写的l表示相对坐标,lineto命令之后跟着线段的终点坐标,表示从上一个坐标绘制一条线段到lineto命令之后的坐标,比如以下代码:
<path d="M 10,10 L 110,130" stroke="black"></path>
就是绘制一条从(10,10)到(110,130)的线段,因为代码中使用大写的L表示lineto命令,所以L之后的坐标为绝对坐标。
<path d="M 10,10 l 100,120" stroke="black"></path>
上述代码绘制的线段也是一条从(10,10)到(110,130)的线段,因为代码中使用小写的l表示相对坐标,l之后的数值表示从当前坐标水平平移100个单位,垂直平移120个单位,确定线段终点的坐标来绘制线段,也就是说l之后的两个数值是相对于当前坐标的,不是坐标系上的绝对坐标
在绘制线段的时候不可避免甚至会频繁的绘制竖直线段或者水平线段,所以svg规范指定了绘制水平线段和竖直线段的快捷方式。
绘制水平线段的时候可以使用大写或者小写H之后跟x坐标来简写,当使用大写H时,H之后的数值表示的是坐标系x的绝对坐标,相当于从当前坐标(currentX,currentY)绘制一条到(X,currentY)的线段,X为H之后的数值。使用小写的h时,h之后的数值表示的是相对x坐标,相当于绘制一条从当前坐标(currentX,currentY)到(currentX+X,currentY)的线段,X为h之后的数值。
绘制竖直线段的时候可以使用大写或者小写的V之后跟着y坐标来简写,使用V的规则同上,绘制的线段相当于从(currentX,currentY)到(currentX,Y)绝对坐标(使用大写V)或者从(currentX,currentY)到(currentX,currentY +Y)相对坐标(使用小写v)
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<path d="M 10,10 H 100" stroke="black"></path>
<path d="M 10,20 h 100" stroke="black"></path>
<path d="M 10,30 V 100" stroke="black"></path>
<path d="M 20,40 v 100" stroke="black"></path>
</svg>
</body>
</html>
效果如下:
绘制椭圆弧
稍后添加
绘制贝塞尔曲线
稍后添加
6. svg学习笔记-路径的更多相关文章
- 8. svg学习笔记-文本
毫无疑问,文本也是svg中组成的重要部分,在svg中,用<text>元素来创建文本,文本的使用格式如下: <text x="20" y="30" ...
- 4. svg学习笔记-文档结构元素和样式的使用
svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...
- svg学习笔记(一)
SVG——可扩展适量图形,基于XML PC端:IE9+ wap端:表现良好,适合使用 基础图形: line(线段) <line x1="25" y1="150 ...
- svg学习笔记
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 2. svg学习笔记-svg中的坐标系统和viewbox
我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...
- 3. svg学习笔记-基本形状和画笔属性
svg中可以绘制的基本图形有线段,矩形,多边形,圆,椭圆,分别来看一下这些基本图形: 线段 使用<line>元素创建一条线段,格式如下: <line x1=" start- ...
- svg的基本图形与属性【小尾巴的svg学习笔记1】
因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删. 一.基本图形 1.矩形 x,y定义矩形的左上角坐标: width,height定义矩形的长度和宽度: rx,ry定义矩形的圆角半径 ...
- svg学习笔记(二)
SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w ...
- 9. svg学习笔记-裁剪和蒙版
裁剪 在svg中进行剪切,对整个svg元素而言,可以使用<svg>元素的viewbox属性,对于单个元素则可以使用<clipPath>元素.在单个图形元素上使用裁剪,可以在&l ...
随机推荐
- 痞子衡嵌入式:备受开源社区推崇的分布式版本控制工具(Git)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是分布式版本控制工具Git. 1.为什么需要版本控制系统? 单人软件项目开发过程,往往很多功能都是逐步增加的,在代码开发过程中,有的时候功 ...
- datatables 配套bootstrap3样式使用小结(1)
今天介绍汇总一下datatables. 网址: www.datatables.net 公司CMS内容资讯站的后台管理界面用了大量的table来管理数据,试用了之后,感觉挺不错,推荐一下. 先上一个基本 ...
- Python面向对象基础:编码细节和注意事项
在前面,我用了3篇文章解释python的面向对象: 面向对象:从代码复用开始 面向对象:设置对象属性 类和对象的名称空间 本篇是第4篇,用一个完整的示例来解释面向对象的一些细节. 例子的模型是父类Em ...
- 翻译:INSERT(已提交到MariaDB官方手册)
本文为mariadb官方手册:INSERT的译文. 原文:https://mariadb.com/kb/en/insert/我提交到MariaDB官方手册的译文:https://mariadb.com ...
- 解读经典-《C#高级编程》第七版-Chapter1-.Net体系结构-Page1-6
前言 大家好.这是开通本号的第一篇文章.从事IT行业已经20年了,从使用PowerBuilder做企业信息系统开始,做了七八年开发,然后转型Java不是很成功,从07年之后,我转做产品经理,机缘巧合, ...
- OJ:重载 << 运算符
Description 补足程序,使得下面程序输出的结果是: ****100 #include <iostream> #include <string> using names ...
- 【golang-GUI开发】struct tags系统(一)
我们已经介绍了qt的signal和slot,现在该讲讲它的struct tags系统了.qt拥有多种的struct tags,我们会去一一了解它们. 什么是struct tags? struct ta ...
- pdf.js插件使用记录,在线打开pdf
天记录一个js库:pdf.js.主要是实现在线打开pdf功能.因为项目需求需要能在线查看pdf文档,所以就研究了一下这个控件. 有些人很好奇,在线打开pdf文档浏览器不是支持吗.是的你说的都是现代浏览 ...
- python同步、互斥锁、死锁
目录 同步 同步的概念 解决线程同时修改全局变量的方式 互斥锁 使用互斥锁完成2个线程对同一个全局变量各加9999999 次的操作 上锁解锁过程 总结 死锁 避免死锁 同步 同步的概念 同步就是协同步 ...
- Mac下写博客工具ecto相关资料
下载地址: https://www.macupdate.com/app/mac/8918/ecto 相关注册码: http://www.cnblogs.com/yssgyw/p/3284501.htm ...