在 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代表什么吗？
问问题
1937 次
2 回答
6
我认为一些混乱来自格式允许将单个参数分离到各种路径操作数的技巧。所以在示例中：
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 中的科学计数法参数以消除零
由于每种操作数都需要一定数量的参数（M、L、T 需要 2；H、V 需要 1；Q、S 需要 4；C 需要 6；A 需要 7；Z 需要 0）你会看到一些情况其中操作数被省略。如果你看到一个 L 后面有 4 个参数，它实际上意味着 2 行，一个 C 后面有 18 个参数，它意味着 3 个三次贝塞尔曲线。
这一切都是为了尽量减少 SVG 中任何浪费的空间，而不仅仅是让它难以阅读。
于 2016-11-07T15:29:16.903 回答
2
SVG 标签的d属性<path>包含一系列指令或描述，这些指令或描述被处理以创建 SVG 的整体形状。这些指令可以是不同的类型：
- Moveto :: 在其他地方重新启动路径（
M或m语法） - Lineto :: 画一条直线（
L或l语法，或H与V，或h与v） - Curveto :: 绘制三次贝塞尔曲线（
C或c语法） - Arcto :: 绘制椭圆曲线（
A或a语法） - ClosePath :: 画一条直线到路径的开始点（
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根据文档中定义的参数数量，根据每个命令将属性拆分，指令集将变得更具可读性。
有关贝塞尔曲线的更多信息，请参见此处。
于 2016-11-07T14:28:52.263 回答