当前位置：文江博客知识库 en-US 文档 Web SVG Attribute d

d - SVG: Scalable Vector Graphics 编辑

The d attribute defines a path to be drawn.

A path definition is a list of path commands where each command is composed of a command letter and numbers that represent the command parameters. The commands are detailed below.

Three elements have this attribute: <path>, <glyph>, and <missing-glyph>

html,body,svg { height:100% }

<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

For <path>, d is a string containing a series of path commands that define the path to be drawn.

Value	<string>
Default value	none
Animatable	Yes

glyph

Warning: As of SVG2 <glyph> is deprecated and shouldn't be used.

For <glyph>, d is a string containing a series of path commands that define the outline shape of the glyph.

Value	<string>
Default value	none
Animatable	Yes

Note: The point of origin (the coordinate 0,0) is usually the upper left corner of the context. However the <glyph> element has its origin in the bottom left corner of its letterbox.

missing-glyph

Warning: As of SVG2 <missing-glyph> is deprecated and shouldn't be used.

For <missing-glyph>, d is a string containing a series of path commands that define the outline shape of the glyph.

Value	<string>
Default value	none
Animatable	Yes

Path commands

Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters.

SVG defines 6 types of path commands, for a total of 20 commands:

MoveTo: M, m
LineTo: L, l, H, h, V, v
Cubic Bézier Curve: C, c, S, s
Quadratic Bézier Curve: Q, q, T, t
Elliptical Arc Curve: A, a
ClosePath: Z, z

Note: Commands are case-sensitive. An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position.

It is always possible to specify a negative value as an argument to a command:

negative angles will be anti-clockwise;
absolute negative x and y values are interpreted as negative coordinates;
relative negative x values move to the left, and relative negative y values move upwards.

MoveTo instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else—in other words, moving the current point (P_o; {x_o, y_o}). There is no line drawn between P_o and the new current point (P_n; {x_n, y_n}).

Command Parameters Notes

Command	Parameters	Notes
M	(`x`, `y`)+	Move the current point to the coordinate `x`,`y`. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (`L`) command(s) (see below). Formula: `P_n` = {`x`, `y`}
m	(`dx`, `dy`)+	Move the current point by shifting the last known position of the path by `dx` along the x-axis and by `dy` along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (`l`) command(s) (see below). Formula: `P_n` = {`x_o` + `dx`, `y_o` + `dy`}

(x, y)+

Move the current point to the coordinate x,y. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (L) command(s) (see below).

Formula: P_n = {x, y}

(dx, dy)+

Move the current point by shifting the last known position of the path by dx along the x-axis and by dy along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (l) command(s) (see below).

Formula: P_n = {x_o + dx, y_o + dy}

Examples

html,body,svg { height:100% }

<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 path commands

LineTo instructions draw a straight line from the current point (P_o; {x_o, y_o}) to the end point (P_n; {x_n, y_n}), based on the parameters specified. The end point (P_n) then becomes the current point for the next command (P_o′).

Command	Parameters	Notes
L	(`x`, `y`)+	Draw a line from the current point to the end point specified by `x`,`y`. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (`L`) command(s). Formula: `P_o′` = `P_n` = {`x`, `y`}
l	(`dx`, `dy`)+	Draw a line from the current point to the end point, which is the current point shifted by `dx` along the x-axis and `dy` along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (`l`) command(s) (see below). Formula: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}
H	`x`+	Draw a horizontal line from the current point to the end point, which is specified by the `x` parameter and the current point's `y` coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit absolute horizontal LineTo (`H`) command(s). Formula: `P_o′` = `P_n` = {`x`, `y_o`}
h	`dx`+	Draw a horizontal line from the current point to the end point, which is specified by the current point shifted by `dx` along the x-axis and the current point's `y` coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative horizontal LineTo (`h`) command(s). Formula: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o`}
V	`y`+	Draw a vertical line from the current point to the end point, which is specified by the `y` parameter and the current point's `x` coordinate. Any subsequent values are interpreted as parameters for implicit absolute vertical LineTo (`V`) command(s). Formula: `P_o′` = `P_n` = {`x_o`, `y`}
v	`dy`+	Draw a vertical line from the current point to the end point, which is specified by the current point shifted by `dy` along the y-axis and the current point's `x` coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative vertical LineTo (`v`) command(s). Formula: `P_o′` = `P_n` = {`x_o`, `y_o` + `dy`}

Examples

html,body,svg { height:100% }

<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>

Cubic Bézier Curve

Cubic Bézier curves are smooth curve definitions using four points:

starting point (current point): (P_o = {x_o, y_o})
end point: (P_n = {x_n, y_n})
start control point: (P_cs = {x_cs, y_cs})
(controls curvature near the start of the curve)
end control point: (P_ce = {x_ce, y_ce})
(controls curvature near the end of the curve)

After drawing, the end point (P_n) becomes the current point for the next command (P_o′).

Command	Parameters	Notes
C	(`x1`,`y1`, `x2`,`y2`, `x`,`y`)+	Draw a cubic Bézier curve from the current point to the end point specified by `x`,`y`. The start control point is specified by `x1`,`y1` and the end control point is specified by `x2`,`y2`. Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute cubic Bézier curve (`C`) command(s). Formulae: `P_o′` = `P_n` = {`x`, `y`} ; `P_cs` = {`x1`, `y1`} ; `P_ce` = {`x2`, `y2`}
c	(`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+	Draw a cubic Bézier curve from the current point to the end point, which is the current point shifted by `dx` along the x-axis and `dy` along the y-axis. The start control point is the current point (starting point of the curve) shifted by `dx1` along the x-axis and `dy1` along the y-axis. The end control point is the current point (starting point of the curve) shifted by `dx2` along the x-axis and `dy2` along the y-axis. Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit relative cubic Bézier curve (`c`) command(s). Formulae: `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`)+	Draw a smooth cubic Bézier curve from the current point to the end point specified by `x`,`y`. The end control point is specified by `x2`,`y2`. The start control point is a reflection of the end control point of the previous curve command. If the previous command wasn't a cubic Bézier curve, the start control point is the same as the curve starting point (current point). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute smooth cubic Bézier curve (`S`) commands.
s	(`dx2`,`dy2`, `dx`,`dy`)+	Draw a smooth cubic Bézier curve from the current point to the end point, which is the current point shifted by `dx` along the x-axis and `dy` along the y-axis. The end control point is the current point (starting point of the curve) shifted by `dx2` along the x-axis and `dy2` along the y-axis. The start control point is a reflection of the end control point of the previous curve command. If the previous command wasn't a cubic Bézier curve, the start control point is the same as the curve starting point (current point). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative smooth cubic Bézier curve (`s`) commands.

Examples

html,body,svg { height:100% }

<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 xlink:href="#ControlPoints" x="100" />
</svg>

Quadratic Bézier Curve

Quadratic Bézier curves are smooth curve definitions using three points:

starting point (current point): P_o = {x_o, y_o}
end point: P_n = {x_n, y_n}
control point: P_c = {x_c, y_c}
(controls curvature)

After drawing, the end point (P_n) becomes the current point for the next command (P_o′).

Command	Parameters	Notes
Q	(`x1`,`y1`, `x`,`y`)+	Draw a quadratic Bézier curve from the current point to the end point specified by `x`,`y`. The control point is specified by `x1`,`y1`. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute quadratic Bézier curve (`Q`) command(s). Formulae: `P_o′` = `P_n` = {`x`, `y`} ; `P_c` = {`x1`, `y1`}
q	(`dx1`,`dy1`, `dx`,`dy`)+	Draw a quadratic Bézier curve from the current point to the end point, which is the current point shifted by `dx` along the x-axis and `dy` along the y-axis. The control point is the current point (starting point of the curve) shifted by `dx1` along the x-axis and `dy1` along the y-axis. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative quadratic Bézier curve (`q`) command(s). Formulae: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`} ; `P_c` = {`x_o` + `dx1`, `y_o` + `dy1`}
T	(`x`,`y`)+	Draw a smooth quadratic Bézier curve from the current point to the end point specified by `x`,`y`. The control point is a reflection of the control point of the previous curve command. If the previous command wasn't a quadratic Bézier curve, the control point is the same as the curve starting point (current point). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute smooth quadratic Bézier curve (`T`) command(s). Formula: `P_o′` = `P_n` = {`x`, `y`}
t	(`dx`,`dy`)+	Draw a smooth quadratic Bézier curve from the current point to the end point, which is the current point shifted by `dx` along the x-axis and `dy` along the y-axis. The control point is a reflection of the control point of the previous curve command. If the previous command wasn't a quadratic Bézier curve, the control point is the same as the curve starting point (current point). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative smooth quadratic Bézier curve (`t`) command(s). Formulae: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}

Examples

html,body,svg { height:100% }

<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 xlink:href="#SmoothQuadraticDown" x="60" />
    <use xlink:href="#SmoothQuadraticUp"   x="60" />
    <use xlink:href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>

Elliptical Arc Curve

Elliptical arc curves are curves defined as a portion of an ellipse. It is sometimes easier to draw highly regular curves with an elliptical arc than with a Bézier curve.

Command Parameters Notes

Command	Parameters	Notes
A	(`rx` `ry` `angle` `large-arc-flag` `sweep-flag` `x` `y`)+	Draw an Arc curve from the current point to the coordinate `x`,`y`. The center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: `rx` and `ry` are the two radii of the ellipse; `angle` represents a rotation (in degrees) of the ellipse relative to the x-axis; `large-arc-flag` and `sweep-flag` allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. `large-arc-flag` allows to chose one of the large arc (`1`) or small arc (`0`), `sweep-flag` allows to chose one of the clockwise turning arc (`1`) or anticlockwise turning arc (`0`) The coordinate `x`,`y` becomes the new current point for the next command. All subsequent sets of parameters are considered implicit absolute arc curve (`A`) commands.
a	(`rx` `ry` `angle` `large-arc-flag` `sweep-flag` `dx` `dy`)+	Draw an Arc curve from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. The center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: `rx` and `ry` are the two radii of the ellipse; `angle` represents a rotation (in degrees) of the ellipse relative to the x-axis; `large-arc-flag` and `sweep-flag` allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. `large-arc-flag` allows a choice of large arc (`1`) or small arc (`0`), `sweep-flag` allows a choice of a clockwise arc (`1`) or anticlockwise arc (`0`) The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All subsequent sets of parameters are considered implicit relative arc curve (`a`) commands.

(rx ry angle large-arc-flag sweep-flag x y)+

Draw an Arc curve from the current point to the coordinate x,y. The center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command:

rx and ry are the two radii of the ellipse;
angle represents a rotation (in degrees) of the ellipse relative to the x-axis;
large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
- large-arc-flag allows to chose one of the large arc (1) or small arc (0),
- sweep-flag allows to chose one of the clockwise turning arc (1) or anticlockwise turning arc (0)

The coordinate x,y becomes the new current point for the next command. All subsequent sets of parameters are considered implicit absolute arc curve (A) commands.

(rx ry angle large-arc-flag sweep-flag dx dy)+

Draw an Arc curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. The center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command:

rx and ry are the two radii of the ellipse;
angle represents a rotation (in degrees) of the ellipse relative to the x-axis;
large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
- large-arc-flag allows a choice of large arc (1) or small arc (0),
- sweep-flag allows a choice of a clockwise arc (1) or anticlockwise arc (0)

The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequent sets of parameters are considered implicit relative arc curve (a) commands.

Examples

html,body,svg { height:100% }

<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

ClosePath instructions draw a straight line from the current position to the first point in the path.

Command	Parameters	Notes
Z, z		Close the current subpath by connecting the last point of the path with its initial point. If the two points are at different coordinates, a straight line is drawn between those two points.

Note: The appearance of a shape closed with ClosePath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the stroke-linejoin setting), rather than just being placed at the same coordinates.

Examples

html,body,svg { height:100% }

<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>

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 The definition of 'd' in that specification.	Candidate Recommendation	Definition for `<path>`
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'd' in that specification.	Recommendation	Initial definition for `<glyph>` and `<missing-glyph>`
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'd' in that specification.	Recommendation	Initial definition for `<path>`