请解释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的整体形状。这些说明可以是不

在一个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的整体形状。这些说明可以是不同的类型:

  • Moveto:在其他地方重新启动路径(
    M
    M
    语法)
  • Lineto:画一条直线(
    L
    L
    语法,或
    H
    V
    ,或
    H
    V
  • 曲线to:绘制一条三次贝塞尔曲线(
    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
    属性拆分为每个命令,则指令集将变为

    有关
    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中所示,以消除零
    由于每种操作数都需要一定数量的参数(M、L、T需要2;H、V需要1;Q、S需要4;C需要6;a需要7;Z需要0),因此您将看到省略操作数的情况。如果你看到一个L后面有4个参数,它实际上意味着2行,一个C后面有18个参数,它意味着3个立方贝塞尔


    这一切都是为了最小化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之间,周期被用作分隔符。