d

该d属性定义要绘制的路径。

路径定义是路径命令 的列表，其中每个命令由命令字母和代表命令参数的数字组成。这些命令的详细信息如下。

您可以将此属性与以下 SVG 元素一起使用：<path>、<glyph>、<missing-glyph>。

d是一个表示属性，因此也可以用作 CSS 属性。

例子

HTML玩复制到剪贴板

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

玩

小路

对于<path>，d是一个字符串，其中包含一系列定义要绘制的路径的路径命令。

价值 <字符串>
默认值 没有任何
可动画化 是的

字形

警告： SVG2 已<glyph>弃用，不应使用。

对于<glyph>，d是一个字符串，其中包含一系列定义字形轮廓形状的路径命令。

价值 <字符串>
默认值 没有任何
可动画化 是的

注意：原点（坐标0, 0）通常是上下文的左上角。然而，该<glyph>元素的起源位于其信箱的左下角。

缺失字形

警告： SVG2 已<missing-glyph>弃用，不应使用。

对于<missing-glyph>，d是一个字符串，其中包含一系列定义字形轮廓形状的路径命令。

价值 <字符串>
默认值 没有任何
可动画化 是的

使用 d 作为 CSS 属性

d是一个表示属性，因此也可以使用 CSS 进行修改。该属性采用path()或none。

下面的示例显示了如何在将鼠标悬停在元素上时应用新路径。新路径与旧路径相同，但在心脏上添加了一条线。

CSS玩复制到剪贴板

html,
body,
svg {
  height: 100%;
}

/* This path is displayed on hover*/
#svg_css_ex1:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
}

HTML玩复制到剪贴板

<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z
       " />
</svg>

玩

路径命令

路径命令是定义要绘制的路径的指令。每个命令由命令字母和代表命令参数的数字组成。

SVG定义了6种路径命令，总共20条命令：

  • 搬去：M，m

  • 线路：L, l, H, h, V,v

  • 三次贝塞尔曲线：C, c, S,s

  • 二次贝塞尔曲线：Q, q, T,t

  • 椭圆弧曲线：A,a

  • 关闭路径：Z,z

注意：命令区分大小写。大写命令指定绝对坐标，而小写命令指定相对于当前位置的坐标。

始终可以指定负值作为命令的参数：

  • 负角为逆时针方向；

  • 绝对负x和y值被解释为负坐标；

  • 相对负x值向左移动，相对负y值向上移动。

移动到路径命令

MoveTo指令可以被认为是拿起绘图工具，并将其放在其他地方，换句话说，移动当前点( P o ; { x o , y o })。P o和新的当前点( P n ; { x n , y n })之间没有绘制任何线。

命令 参数 笔记
中号 ( x, y)+

将当前点 移动到坐标 x, y。任何后续坐标对都被解释为隐式绝对 LineTo ( L) 命令的参数（见下文）。

公式： P n = { x, y}
米 ( dx, dy)+

通过沿 x 轴和 y 轴移动路径的最后一个已知位置来 移动当前点。任何后续坐标对都被解释为隐式相对 LineTo ( ) 命令的参数（见下文）。 dxdyl

公式： P n = { x o + dx, y o + dy}
例子

HTML玩复制到剪贴板

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 40,20 h 10
       m  0,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 50,50 h 10
       m-20,10 h 10
       m-20,10 h 10
       m-20,10 h 10" />
</svg>

玩

LineTo 路径命令

LineTo指令根据指定的参数从当前点( P o ; { x o , y o }) 到终点( P n ; { x n , y n })绘制一条直线。然后终点( P n ) 成为下一个命令 ( P o ' )的当前点。

命令 参数 笔记
L ( x, y)+

从当前点到 , 指定的终点 绘制一条直线x。y任何后续坐标对都被解释为隐式绝对 LineTo ( L) 命令的参数。

公式： P o ′ = P n = { x, y}
我 ( dx, dy)+

从当前点到 终点 绘制一条线，终点是当前点dx沿 x 轴和 dyy 轴移动的距离 。任何后续坐标对都被解释为隐式相对 LineTo ( l) 命令的参数（见下文）。

公式： P o ′ = P n = { x o + dx, y o + dy}
H x+

从当前点到 终点 绘制一条水平线，终点由x参数和当前点 坐标指定 y。任何后续值都被解释为隐式绝对水平 LineTo ( H) 命令的参数。

公式： P o ′ = P n = { x, y o }
H dx+

从当前点到 终点 绘制一条水平线，终点由当前点dx沿 x 轴移动和当前点的 y坐标指定 。任何后续值都被解释为隐式相对水平 LineTo ( h) 命令的参数。

公式： P o ′ = P n = { x o + dx, y o }
V y+

从当前点到 终点y绘制一条垂直线，终点由参数和当前点 坐标指定 x。任何后续值都被解释为隐式绝对垂直 LineTo ( V) 命令的参数。

公式： P o ′ = P n = { x o , y}
v dy+

从当前点到 终点绘制一条垂直线，终点由当前点dy沿 y 轴移动和当前点的 x坐标指定 。任何后续值都被解释为隐式相对垂直 LineTo ( v) 命令的参数。

公式： P o ′ = P n = { x o , y o + dy}
例子

HTML玩复制到剪贴板

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- LineTo commands with absolute coordinates -->
  <path
    fill="none"
    stroke="red"
    d="M 10,10
           L 90,90
           V 10
           H 50" />

  <!-- LineTo commands with relative coordinates -->
  <path
    fill="none"
    stroke="red"
    d="M 110,10
           l 80,80
           v -80
           h -40" />
</svg>

玩

三次贝塞尔曲线

三次贝塞尔曲线是使用四个点的平滑曲线定义：

  • 起点（当前点）

  • ( P o = { x o , y o })

  • 终点

  • ( P n = { x n , y n })

  • 起始控制点

  • ( P cs = { x cs , y cs }) （控制曲线起点附近的曲率）

  • 终点控制点

  • ( P ce = { x ce , y ce }) （控制曲线末端附近的曲率）

绘制后，终点（P n）成为下一个命令（P o ' ）的当前点。

命令 参数 笔记
C ( x1, y1, x2, y2, x, y)+

从当前点到 , 指定的终点绘制 三次贝塞尔曲线x。y起始控制点由 指定 x1，y1结束控制点x2由,指定y2。坐标对的任何后续三元组都被解释为隐式绝对三次贝塞尔曲线 ( C) 命令的参数。

  • 公式：

  • P o ′ = P n = { x, y} ;
    P cs = { x1, y1} ;
    Pce = {x2 , y2}
C ( dx1, dy1, dx2, dy2, dx, dy)+

从当前点到 终点（即当前点dx沿 x 轴和 dy沿 y 轴移动） 绘制三次贝塞尔曲线。起始 控制点是当前点（曲线的起始点）dx1沿 x 轴和dy1y 轴移动的距离。结束 控制点是当前点（曲线的起点）dx2沿 x 轴和dy2y 轴移动的距离。坐标对的任何后续三元组都被解释为隐式相对三次贝塞尔曲线 ( c) 命令的参数。

  • 公式：

  • P o ′ = P n = { x o + dx, y o + dy} ;
    P cs = { x o + dx1, y o + dy1} ;
    P ce = { x o + dx2, y o + dy2}
S ( x2, y2, x, y)+ 从当前点到 , 指定的终点 绘制一条平滑的三次贝塞尔曲线x。y结束控制点x2由,指定 y2。起始控制点是前一个曲线命令的结束控制点关于当前点的反映 。如果上一个命令不是三次贝塞尔曲线，则 起始控制点与曲线起点（当前点）相同。任何后续的坐标对都被解释为隐式绝对平滑三次贝塞尔曲线 ( S) 命令的参数。
s ( dx2, dy2, dx, dy)+ 从当前点到 终点 绘制一条平滑的三次贝塞尔曲线，终点 是当前点dx沿 x 轴和 dy沿 y 轴移动的距离 。结束 控制点是当前点（曲线的起点）dx2沿 x 轴和dy2y 轴移动的距离。起始 控制点是前一个曲线命令的结束控制点关于当前点的反映 。如果上一个命令不是三次贝塞尔曲线，则 起始控制点与曲线起点（当前点）相同。任何后续的坐标对都被解释为隐式相对平滑三次贝塞尔曲线 ( s) 命令的参数。
例子

HTML玩复制到剪贴板

<svg
  viewBox="0 0 200 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Cubic Bézier curve with absolute coordinates -->
  <path
    fill="none"
    stroke="red"
    d="M 10,90
           C 30,90 25,10 50,10
           S 70,90 90,90" />

  <!-- Cubic Bézier curve with relative coordinates -->
  <path
    fill="none"
    stroke="red"
    d="M 110,90
           c 20,0 15,-80 40,-80
           s 20,80 40,80" />

  <!-- Highlight the curve vertex and control points -->
  <g id="ControlPoints">
    <!-- First cubic command control points -->
    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
    <circle cx="30" cy="90" r="1.5" />

    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
    <circle cx="25" cy="10" r="1.5" />

    <!-- Second smooth command control points (the first one is implicit) -->
    <line
      x1="50"
      y1="10"
      x2="75"
      y2="10"
      stroke="lightgrey"
      stroke-dasharray="2" />
    <circle cx="75" cy="10" r="1.5" fill="lightgrey" />

    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
    <circle cx="70" cy="90" r="1.5" />

    <!-- curve vertex points -->
    <circle cx="10" cy="90" r="1.5" />
    <circle cx="50" cy="10" r="1.5" />
    <circle cx="90" cy="90" r="1.5" />
  </g>
  <use href="#ControlPoints" x="100" />
</svg>

玩

二次贝塞尔曲线

二次贝塞尔曲线是使用三个点的平滑曲线定义：

  • 起点（当前点）

  • P o = { x o , y o }

  • 终点

  • P n = { x n , y n }

  • 控制点

  • P c = { x c , y c } （控制曲率）

绘制后，终点（P n）成为下一个命令（P o ' ）的当前点。

命令 参数 笔记
问 ( x1, y1, x, y)+

从当前点到 , 指定的终点绘制 一条二次贝塞尔曲线x。y控制点x1由,指定 y1。任何后续的坐标对都被解释为隐式绝对二次贝塞尔曲线 ( Q) 命令的参数。

  • 公式：

  • P o ′ = P n = { x, y} ;
    P c = { x1, y1}
q ( dx1, dy1, dx, dy)+

从当前点到 终点绘制一条二次贝塞尔曲线，终点 是当前点dx沿 x 轴和 dyy 轴移动的距离 。控制 点是当前点（曲线的起点）dx1沿 x 轴和dy1y 轴移动的距离。任何后续的坐标对都被解释为隐式相对二次贝塞尔曲线 ( q) 命令的参数。

  • 公式：

  • P o ′ = P n = { x o + dx, y o + dy} ;
    P c = { x o + dx1, y o + dy1}
时间 ( x, y)+

从当前点到 ,指定的 终点绘制一条平滑 的二次贝塞尔曲线 x。y控制点是前一个曲线命令的控制点关于当前点的反映 。如果上一个命令不是二次贝塞尔曲线，则控制点与曲线起点（当前点）相同。任何后续坐标对都被解释为隐式绝对平滑二次贝塞尔曲线 ( T) 命令的参数。

  • 公式：

  • P o ′ = P n = { x, y}
t ( dx, dy)+

从当前点到终点 绘制一条平滑的二次贝塞尔曲线 ，终点 是 当前点dx沿 x 轴和dy沿 y 轴移动的距离。控制 点是前一个曲线命令的控制点关于当前点的反映 。如果上一个命令不是二次贝塞尔曲线，则控制点与曲线起点（当前点）相同。任何后续坐标对都被解释为隐式相对平滑二次贝塞尔曲线 ( t) 命令的参数。

  • 公式：

  • P o ′ = P n = { x o + dx, y o + dy}
例子

HTML玩复制到剪贴板

<svg
  viewBox="0 0 200 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Quadratic Bézier curve with implicit repetition -->
  <path
    fill="none"
    stroke="red"
    d="M 10,50
           Q 25,25 40,50
           t 30,0 30,0 30,0 30,0 30,0" />

  <!-- Highlight the curve vertex and control points -->
  <g>
    <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
    <circle cx="25" cy="25" r="1.5" />

    <!-- Curve vertex points -->
    <circle cx="10" cy="50" r="1.5" />
    <circle cx="40" cy="50" r="1.5" />

    <g id="SmoothQuadraticDown">
      <polyline
        points="40,50 55,75 70,50"
        stroke="rgba(0,0,0,.2)"
        stroke-dasharray="2"
        fill="none" />
      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
      <circle cx="70" cy="50" r="1.5" />
    </g>

    <g id="SmoothQuadraticUp">
      <polyline
        points="70,50 85,25 100,50"
        stroke="rgba(0,0,0,.2)"
        stroke-dasharray="2"
        fill="none" />
      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
      <circle cx="100" cy="50" r="1.5" />
    </g>

    <use href="#SmoothQuadraticDown" x="60" />
    <use href="#SmoothQuadraticUp" x="60" />
    <use href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>

玩

椭圆弧曲线

椭圆弧曲线是定义为椭圆一部分的曲线。有时，使用椭圆弧绘制高度规则的曲线比使用贝塞尔曲线更容易。

命令 参数 笔记
A ( rx ry angle large-arc-flag sweep-flag x y)+

从当前点到坐标 , 绘制一条圆弧 曲线x。y用于绘制圆弧的椭圆的中心是根据命令的其他参数自动确定的：

  • rx和ry是椭圆的两个半径；

  • angle表示椭圆相对于 x 轴的旋转（以度为单位）；

  • large-arc-flag并 sweep-flag允许选择必须绘制哪条弧，因为可以从其他参数中绘制 4 种可能的弧。

    • large-arc-flag允许选择大弧 ( 1) 或小弧 ( 0) 之一，

    • sweep-flag可选择顺时针旋转圆弧 ( 1) 或逆时针旋转圆弧 ( 0) 之一

坐标x,y成为下一个命令的新当前点。所有后续参数组均被视为隐式绝对圆弧曲线 ( A) 命令。
A ( rx ry angle large-arc-flag sweep-flag dx dy)+

从当前点到当前点分别沿 dxx 轴和 dyy 轴平移坐标的点绘制一条圆弧曲线。用于绘制圆弧的椭圆的中心是根据命令的其他参数自动确定的：

  • rx和ry是椭圆的两个半径；

  • angle表示椭圆相对于 x 轴的旋转（以度为单位）；

  • large-arc-flag并 sweep-flag允许选择必须绘制哪条弧，因为可以从其他参数中绘制 4 种可能的弧。

    • large-arc-flag允许选择大弧 ( 1) 或小弧 ( 0)，

    • sweep-flag允许选择顺时针圆弧 ( 1) 或逆时针圆弧 ( 0)

当前点的 X 和 Y 坐标将移动 dx和dy以便用于下一个命令。所有后续参数组均被视为隐式相对圆弧曲线 ( a) 命令。
例子

HTML玩复制到剪贴板

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- The influence of the arc flags with which the arc is drawn -->
  <path
    fill="none"
    stroke="red"
    d="M 6,10
           A 6 4 10 1 0 14,10" />

  <path
    fill="none"
    stroke="lime"
    d="M 6,10
           A 6 4 10 1 1 14,10" />

  <path
    fill="none"
    stroke="purple"
    d="M 6,10
           A 6 4 10 0 1 14,10" />

  <path
    fill="none"
    stroke="pink"
    d="M 6,10
           A 6 4 10 0 0 14,10" />
</svg>

玩

关闭路径

ClosePath指令从当前位置到路径中的第一个点绘制一条直线。

命令 参数 笔记
Z Z
通过将路径的最后一个点与其初始点连接来关闭当前子路径。如果两点位于不同的坐标，则在这两点之间绘制一条直线。

注意：使用ClosePath封闭的形状的外观可能与使用其他命令之一绘制一条到原点的直线封闭的形状的外观不同，因为线条末端连接在一起（根据设置），而不仅仅是连接stroke-linejoin在一起被放置在相同的坐标处。

例子

HTML玩复制到剪贴板

<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
  <!--
  An open shape with the last point of
  the path different to the first one
  -->
  <path
    stroke="red"
    d="M 5,1
           l -4,8 8,0" />

  <!--
  An open shape with the last point of
  the path matching the first one
  -->
  <path
    stroke="red"
    d="M 15,1
           l -4,8 8,0 -4,-8" />

  <!--
  A closed shape with the last point of
  the path different to the first one
  -->
  <path
    stroke="red"
    d="M 25,1
           l -4,8 8,0
           z" />
</svg>

玩

规格

规格
可缩放矢量图形 (SVG) 2 # DProperty
可缩放矢量图形 (SVG) 1.1（第二版）# GlyphElementDAttribute
可缩放矢量图形 (SVG) 1.1（第二版）# DAttribute

f1d6a75d96cd7d22099ce24b090954ee.png

# tensorflow # 人工智能 # python # 深度学习 # 机器学习
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

AI编程全景解析：自动化代码生成、低代码/无代码开发与算法优化实战了故膳窗倘

AI编程全景解析：自动化代码生成、低代码/无代码开发与算法优化实战-摘要

avatar 2048 AI社区
cover

阻塞 vs 非阻塞:程序等待的两种哲学

avatar 2048 AI社区

Claude Code 本地部署实战：打造属于你的 AI 编程助手嚼问涡柯滥

Claude Code 本地部署实战：打造属于你的 AI 编程助手-摘要

avatar 2048 AI社区