请解释SVG路径命令和坐标
在一个SVG文件中,我找到了如下路径:请解释SVG路径命令和坐标,svg,svg-path,Svg,Svg Path,在一个SVG文件中,我找到了如下路径: <path id="kvg:0548b-s7" kvg:type="㇐b" d="M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13"/> 有人能解释一下坐标48.38c5.65-0.95和18.92-3.42c2.05-0.45代表什么吗?SVG的标记的d属性包含一系列指令或描述,这些指令或描述经过处理以创建SVG的整体形状。这些说明可以是不
<path id="kvg:0548b-s7" kvg:type="㇐b" d="M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13"/>
有人能解释一下坐标
48.38c5.65-0.95
和18.92-3.42c2.05-0.45
代表什么吗?SVG的
标记的d
属性包含一系列指令或描述,这些指令或描述经过处理以创建SVG的整体形状。这些说明可以是不同的类型:
M
或M
语法)L
或L
语法,或H
和V
,或H
和V
)C
或C
语法)A
或A
语法)Z
或Z
语法)d
属性中提供的说明以大写的M
开头,表示Moveto
命令的绝对位置值。但是也存在小写的c
命令,它们表示Curveto
指令集的相对值
关于你询问的第一个坐标
Moveto
命令有两个参数。在您要查询的第一个值的第一段中,48.38是y
轴参数(紧跟x
参数65.32),用于Moveto
命令。剩余的c5.65-0.95是新Curveto
指令集的开始
Curveto
命令有三个参数,由x
和y
对组成,每对都用破折号(-
)分隔。因为它是用小写字母c
给出的,所以后面的值是相对的。第一对是曲线起点的控制点,第二对是曲线终点的控制点,第三对是定义曲线起点的当前点的坐标
关于你要问的第二组坐标
18.92-3.42是由第一个Curveto
命令定义的当前点(第三个参数),而c2.05-0.45是下一个Curveto
命令的第一个参数,该命令控制贝塞尔曲线的开始
这些值中的点是小数点
如果根据文档中定义的参数数量,将d
属性拆分为每个命令,则指令集将变为
有关d
属性的更多信息,以及
关于bezier曲线的更多信息,我认为一些混淆来自于该格式允许将单个参数分离到各种路径操作数的技巧。因此,在示例中: M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13 您可以看到参数
- 在M(ove)65.32,48.38中用逗号分隔
- 由连字符(减号)分隔,如c(ubic bezier)2.05-0.45
- 由新操作数分隔,如…48.38c5.65
- 您还将看到由空格而不是逗号分隔的参数
- 如果前面的参数中有句点,您甚至可以看到由前导句点分隔的参数
- 有时,您会在科学记数法中看到参数,如3.22e-9中所示,以消除零
这一切都是为了最小化SVG中的任何浪费空间,而不仅仅是为了使其难以读取 谢谢你的回答,我知道是x和y坐标,但18.92-3.42c2.05-0.45是什么。我的意思是这不是一个数字。字母c和符号“-”代表什么。为什么会有多个点?“如果前面的参数中有句点,则由前导句点分隔”。。。这是最让我困惑的部分。我如何解释这个d?:
“m492.59 136.98 2.208-1.397.852.505.433.555.081.117.238.612.028.212.991 2.02.469.802-.752.419-.784.559-.164.387-.034.194-.563.51-1.359.355-1.464-5.214z”
。(我想编写一个从SVG到画布绘图的转换脚本。SVG在其中一个路径中包含了这一点。)看起来这是一个缩写:m492.59136.98L2.208,-1.397L0.852,0.505L0.433,0.555L0.081,0.117,l0.238,0.612,l0.028,0.212 l0.991,2.02,l0.469,0.802,l-0.752,0.419。。。基本上你有很多坐标在0和1之间,周期被用作分隔符。