SVG的形状标签里,path是最强大的一个,掌握了path就足够处理常见的绘图问题了。
先看一下path标签的基本用法:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
path标签通过属性d来定义路径,定义信息由一段字符串构成,另外path也可以通过fill和stroke属性来定义填充和边框。
d属性的信息其实并不复杂,由字母和数字构成,数字表示坐标点,字母负责表示如何连接这些坐标点。比如上面的示例中,M表示起点,L表示直线连接,所以d的信息可以这样解读:
M100,100 -> 以(100,100)坐标点为起点
L200,200 -> 从(100,100)向(200,200)画一条直线
L200,400 -> 从(200,200)向(200,400)画一条直线
在path标签的d属性中,一共有10个命令可以使用,下面5个命令是基础,比较简单。
M 移动到(moveTo) x,y 开始点坐标
Z 闭合路径(closepath) 将路径的开始和结束点用直线连接
L 直线(lineTo) x,y 当前节点到指定(x,y)节点,直线连接
H 水平直线 x 保持当前点的y坐标不变,x轴移动到x,形成水平线
V 垂直直线 y 保持当前点的x坐标不变,y轴移动到y,形成垂直线
标准的指令字母是10个,外加1个非标准的,这个可以参见我翻译构建的Snap.svg项目中Paper.path()页面中的表格:
M | moveto 移动到 | (x y)+ |
Z | closepath 关闭路径 | (none) |
L | lineto 画线到 | (x y)+ |
H | horizontal lineto 水平线到 | x+ |
V | vertical lineto 垂直线到 | y+ |
C | curveto 三次贝塞尔曲线到 | (x1 y1 x2 y2 x y)+ |
S | smooth curveto 光滑三次贝塞尔曲线到 | (x2 y2 x y)+ |
Q | quadratic Bézier curveto 二次贝塞尔曲线到 | (x1 y1 x y)+ |
T | smooth quadratic Bézier curveto 光滑二次贝塞尔曲线到 | (x y)+ |
A | elliptical arc 椭圆弧 | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
R | Catmull-Rom curveto* Catmull-Rom曲线 | x1 y1 (x y)+ |
其中,Catmull-Rom
曲线不是标准的SVG命令,我们这里不予以讨论!
如果指令字母是大写的,例如M
, 则表示坐标位置是绝对位置;如果指令字母小写的,例如m
, 则表示坐标位置是相对位置。//zxx: 本文全部使用大写字母做演示和说明。
其中,有5个指定属于基本指令,你也可以理解为“好理解好上手好记忆”的指令,见下表:
M | 移动到(moveTo) | x,y | 路径起始点坐标 |
Z | 闭合路径(closepath) | 将路径的开始和结束点用直线连接 | |
L | 直线(lineTo) | x,y | 当前节点到指定(x,y)节点,直线连接 |
H | 水平直线 | x | 保持当前点的y坐标不变,x轴移动到x, 形成水平线 |
V | 垂直直线 | y | 保持当前点的x坐标不变,y轴移动到y, 形成垂直线 |
除了这5个参数少、直来直往的指令,剩下的,除了弧形命令A(Arcs),就都是与贝塞尔曲线相关的命令了。
M和L
再看一个M和L的例子
<path d="M30,30 L170,30 L30,170 L170,170"></path>
从A点(30,30)开始,直线画向B点(170,30),再直线到C点(30,170),再直线到D点(170,170),最终形成了Z型的路径。
填充效果,以及Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
这段路径描述中有两个M,所以就在一个path中,出现了两个相对独立的路径,第一个路径和上面的例子一样,是Z字型。
第二个路径则是一个矩形,描述中出现了Z命令,表示将这段路径的开头和结尾连接起来。
另外,这里我们给路径定义了fill属性,可以看到,无论路径是否闭合,fill都会生效。
H和V
最后看一下H和V两个命令,实际上就是在x或y轴不变时,L命令的简写,所以下面两端描述,画出的图是一样的。
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path> <path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="yellow"></path>
原文:http://xbingoz.com/171.html
相关推荐
svgpath 用于SVG路径转换的低级工具包。 有时您不能使用transform属性,而必须直接将更改应用于svg路径。 那么这个包是给你的:)! 注意:此软件包适用于字符串,而不适用于完整的svg xml源。 安装 npm install svg...
echarts svg矢量图整理合集,包括五角星、梯形、微信、相机、文件夹、喇叭、放大、缩小、饼图、柱图等等
基于SVG矢量图形格式浏览器绘图工具的设计与实现,王春奎,文福安,近年来,网络教学平台发展迅速,其功能得到不断的加强和完善。但是由于浏览器在图形处理方面存在一些不足,这给教师在线编辑多媒
SVG矢量动画
C#下处理生成svg矢量图的类库,功能超全。SharpVectorGraphics.0.4.alpha版本。
使用QT5.12.1加载SVG格式的矢量图,QT Creator版本是4.5.1(Community),加载的SVG矢量图可在滚动区域内缩放,支持鼠标滚轮缩放
InKscape V0.48.5 SVG矢量绘图软件中文语音包 官方的中文不完整,这个基本完整了。
SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图形描述语言,他是基于XML 的、专门为网络而设计的图像格式。
将svg形状元素转换为路径svg元素的节点库。 安装 npm install convertpath 它能做什么 convertpath具有基于插件的体系结构,因此几乎每个优化都是一个单独的插件。 今天我们有: 插入 描述 将defs和symbol元素...
SVG路径反转库这是一个简单的SVG路径逆转库,具有非常简单的API。安装使用npm安装: $> npm install svg-path-reverse使用图书馆这是一个通用库,您可以通过require.js,UMD,commonjs,浏览器等方式加载它,不管它...
SvgPathEditor在浏览器中编辑或创建SVG路径: : 如何使用基本的:在路径字段中粘贴或编辑原始路径单击+将新命令添加到路径,选择类型,然后单击目标通过拖放移动点单击一个点,然后在...按钮上,在选定的命令之后...
深圳地图SVG矢量图,2020年最新区划(包括了光明/坪山/宝安/龙华/龙岗/福田/南山/盐田/罗湖/大鹏等所有现有的精准行政区划。
SVG矢量图形控件 WEB版本 希望对您有所帮助
svg-path-converter NPM模块,用于将svgs转换为单路径。 这对于图标和其他单色SVG很有用。 当前不支持<text> 。 基于初始代码。安装npm install --save svg-path-converter更新版本1.0.12 修复了当使用精度> 0时与...
svg-path-bounds 从svg路径数据中检索边界框。 const getBounds = ... path-基于svg路径数据创建画布形状 将svg路径坐标带到任何线性范围 相似的 svg-path-bounding-box 执照 麻省理工学院:copyright:Dmitry Iv。
基于SVG的矢量绘图与矩阵变换
SVG矢量图语言学习资料(pdf)........
将SVG矢量图显示在Qt的QGraphicsView视图框架上,具有通过QDomDocument、QDomElement、QDomNode、QDomNameNodeMap等对象来解析svg并修改svg来实现矢量图的部分内容缩放,部分内容不缩放的功能。
html5 svg路径上的文字动画
glide加载和下载svg矢量图片