SVG格式化＜PATH＞说明

<Path="..."/> 用于定义一个矢量形状。字符串中包含的关键命令不外乎：

下面的命令中，大写说明后面的数值是绝对位置（Position），小写表示后面的数值是相对于当前的位置（Shift/Offset）.

M/m
--moveto: 想象【哆啦A梦】，打开【任意门】瞬移到某个位置，因此轨迹是不连续的
--格式: `M x y` 或者 `m dx dy`
L/l
--lineto: 想象【彩虹马】，拖着轨迹走直线
--格式: `L x y` 或者 `l dx dy`
H/h
-- horizontally moveto: 后面不管跟着多少个数值，都将其作为横轴上的（沿直线）移动
-- 格式: `H x1 x2 ... x_n` 或者 `h dx1 dx2 ... dx_n`
-- 等价于: `L x1 0 L x2 0 ... L x_n 0` 或者 `l dx1 0 l dx2 0 ... l dx_n 0`
V/v
-- vertically moveto: 后面不管跟着多少个数值，都将其作为纵轴上的（沿直线）移动
-- 格式: `V y1 y2 ... y_n` 或者 `v dy1 dy2 ... dy_n`
-- 等价于: `L 0 y1 L 0 y2 ... L 0 y_n` 或者 `l 0 dy1 l 0 dy2 ... l 0 dy_n`
C/c
-- 三次贝塞尔曲线
-- 需要4个点确定一段曲线，除却起点 `x0 y0` 外，还需要标志点1、标志点2、终点
-- 格式：`Cx1 y1 x2 y2 x3 y3` 或者 `c(x1-x0) (y1-y0) (x2-x0) (y2-y0) (x3-x0) (y3-y0)`
下图所示的两个例子：左子图是基于绝对坐标表示的，右子图是基于相对坐标表示的。其中，为了简便表示：1️⃣ 数字与字母之间无空格；2️⃣ 数字之间用逗号隔开；3️⃣ 当第二个数是负数时，逗号省略。如 M320,160c100,-150,200,-150,300,0=M320,160c100-150,200-150,300,0

S/s
Q/q

-- quadratic Bézier Curve 二次 B-样条曲线
-- 说明我们需要 3 个点，包括当前所在的位置点，还需要两个，因此，其
-- 格式: `Q x1 y1 x2 y2` 或者 `q dx1 dy1 dx2 dy2`
-- 其中，dx1 = x1-x0, dx2 = x2-x0dy1 = y1-y0, dy2 = y2-y0
-- 一个例子如下图：

A B C

<!DOCTYPE html>
<html>
<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450"><!-- Draw lines --><path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="1" fill="none" /><path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="1" fill="none" /><path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="4" fill="none" /><!-- Mark relevant points --><g stroke="black" stroke-width="3" fill="black"><circle id="pointA" cx="100" cy="350" r="3" fill="red" stroke="red" /><circle id="pointB" cx="250" cy="50" r="3" /><circle id="pointC" cx="400" cy="350" r="3" /></g><!-- Label the points --><g font-size="30" font="sans-serif" fill="black" stroke="none"text-anchor="middle"><text x="100" y="350" dx="-30">A</text><text x="250" y="50" dy="-10">B</text><text x="400" y="350" dx="30">C</text></g>
</svg>
</body>
</html>

T/t
A/a

-- 椭圆曲线
-- 参数：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
-- 具体参数表示意义见下页 ppt
-- p.s. F12 打开开发者模式调整数据观察图形变化便于理解！！

Z/z

-- close path
-- 从最后的一个点直接**沿直线** 回到最近的一个 `M/m` 的位置，构成闭合图行，因此不需要自定任何点的坐标或者偏移
-- 格式: "xxx Z" 或者 "xxx z"

SVG格式化＜PATH＞说明相关推荐

SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）
维基百科:贝塞尔曲线以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 func ...
SVG矢量绘图 path路径详解（基本画法）
SVG的形状标签里,path是最强大的一个,掌握了path就足够处理常见的绘图问题了. 先看一下path标签的基本用法: <path d="M100,100 L200,200 L200 ...
svg中path图形自适应_制作自己的自适应SVG图形和图表
svg中path图形自适应 A few weeks ago I talked about making this Star Trek vs. Star Wars chart in SVG using ...
svg中path贝塞尔曲线和圆弧图文详解
最近研究了一下svg的path标签,功能非常强大,理论上来讲path标签可以画出任意图形.自己记性不太好,记录一下path的使用语法和自己的理解. path介绍 path用d属性来描述路径,语法格式大 ...
android地图路径绘制,android：利用svg的path路径+canvas 开发自定义地图控件
需求:做小型地图的一个显示功能实现思路:自定义view解析对应的svg文件,在利用canvas的画笔画出相应的地图线条.各个线条围成的区域可以表示成各个元素比如树,街道,路灯,汽车等等一切事物.然后 ...
SVG格式图片转成HTML中SVG的Path路径
AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击"文件(F ...
svg中 path标签的d属性
svg: path标签中的d属性: M = moveto(M X,Y) :将画笔移动到指定的坐标位置 L = lineto(L X,Y) :画直线到指定的坐标位置 H = horizontal lin ...
SVG中path标签的简单使用
path标签概述他是由命令及其参数组组成的字符串,如: <path d="M0,0L10,20C30-10,40,20,100,100" stroke="red& ...
svg笔记----------path篇
每个路径都必须以moveto 命令开始 moveto.lineto和closepath <path d="M 10 10 L 100 10z"/> 大写字母命令的坐标是 ...

SVG格式化＜PATH＞说明

SVG格式化＜PATH＞说明相关推荐

最新文章

热门文章