在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
代表的内容吗?
答案 0 :(得分:4)
我认为一些混乱来自于格式允许将各个参数分离到各种路径操作数的技巧。所以在这个例子中:
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,L,T需要2; H,V需要1; Q,S需要4; C需要6; A需要7;而Z需要0)你将看到省略操作数的情况。如果你看到一个带有4个参数的L,它实际上意味着2行,一个C带有18个参数,它意味着3个立方贝塞尔数。
这是为了最大限度地减少SVG中浪费的空间,而不仅仅是为了让它难以阅读。
答案 1 :(得分:2)
SVG d
标记的<path>
属性包含一系列说明或说明,这些说明或说明经过处理后可创建SVG的整体形状。这些说明可以是不同类型的:
M
或m
语法)L
或l
语法,或H
和V
或h
和v
)C
或c
语法)A
或a
语法)Z
或z
语法)大写字母语法表示给出绝对位置值。小写语法意味着相对位置值遵循,意味着从当前控制点向下和向右找到后续坐标。
SVG的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
属性并将其分开,根据文档中定义的参数个数,每个命令,指令集变为much more readable。
有关贝塞尔曲线的更多信息,请see here。