Movatterモバイル変換

[0]ホーム
URL:

  1. Web
  2. SVG
  3. Reference
  4. Attributes
  5. d

d

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

Thed attribute defines a path to be drawn.

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

This attribute is used with the SVG<path> element.

d is a presentation attribute, and hence can also beused as a CSS property.

Example

html,body,svg {  height: 100%;}
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

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

Value<string>
Default valuenone
AnimatableYes

Using d as a CSS property

d is a presentation attribute, and hence can be also be modified using CSS.The property takes eitherpath() ornone.

The example below shows how you might apply a new path on hover over an element.The new path is the same as the old one, but adds a line across the heart.

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

For a<path> animation example, see the CSSd property reference page example.

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:

Note:Commands arecase-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 negativex andy values are interpreted as negative coordinates;
  • relative negativex values move to the left, and relative negativey values move upwards.

MoveTo path commands

MoveTo instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else—in other words, moving thecurrent point (Po; {xo,yo}). There is no line drawn betweenPo and the newcurrent point (Pn; {xn,yn}).

CommandParametersNotes
M (x,y)+

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

Formula:Pn = {x,y}

m (dx,dy)+

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

Formula:Pn = {xo +dx,yo +dy}

Examples

html,body,svg {  height: 100%;}
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 path commands

LineTo instructions draw a straight line from thecurrent point (Po; {xo,yo}) to theend point (Pn; {xn,yn}), based on the parameters specified. Theend point (Pn) then becomes thecurrent point for the next command (Po′).

CommandParametersNotes
L(x,y)+

Draw a line from thecurrent point to theend point specified byx,y. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (L) command(s).

Formula:Po′ =Pn = {x,y}

l (dx,dy)+

Draw a line from thecurrent point to theend point, which is thecurrent point shifted bydx along the x-axis anddy along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (l) command(s) (see below).

Formula:Po′ =Pn = {xo +dx,yo +dy}

Hx+

Draw a horizontal line from thecurrent point to theend point, which is specified by thex parameter and thecurrent point'sy coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit absolute horizontal LineTo (H) command(s).

Formula:Po′ =Pn = {x,yo}

hdx+

Draw a horizontal line from thecurrent point to theend point, which is specified by thecurrent point shifted bydx along the x-axis and thecurrent point'sy coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative horizontal LineTo (h) command(s).

Formula:Po′ =Pn = {xo +dx,yo}

Vy+

Draw a vertical line from thecurrent point to theend point, which is specified by they parameter and thecurrent point'sx coordinate. Any subsequent values are interpreted as parameters for implicit absolute vertical LineTo (V) command(s).

Formula:Po′ =Pn = {xo,y}

vdy+

Draw a vertical line from thecurrent point to theend point, which is specified by thecurrent point shifted bydy along the y-axis and thecurrent point'sx coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative vertical LineTo (v) command(s).

Formula:Po′ =Pn = {xo,yo +dy}

Examples

html,body,svg {  height: 100%;}
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>

Cubic Bézier curve

CubicBézier curves are smooth curve definitions using four points:

starting point (current point)

(Po = {xo,yo})

end point

(Pn = {xn,yn})

start control point

(Pcs = {xcs,ycs})(controls curvature near the start of the curve)

end control point

(Pce = {xce,yce})(controls curvature near the end of the curve)

After drawing, theend point (Pn) becomes thecurrent point for the next command (Po′).

CommandParametersNotes
C (x1,y1,x2,y2,x,y)+

Draw a cubic Bézier curve from thecurrent point to theend point specified byx,y. Thestart control point is specified byx1,y1 and theend control point is specified byx2,y2. Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute cubic Bézier curve (C) command(s).

Formulae:
Po′ =Pn = {x,y} ;
Pcs = {x1,y1} ;
Pce = {x2,y2}
c (dx1,dy1,dx2,dy2,dx,dy)+

Draw a cubic Bézier curve from thecurrent point to theend point, which is thecurrent point shifted bydx along the x-axis anddy along the y-axis. Thestart control point is thecurrent point (starting point of the curve) shifted bydx1 along the x-axis anddy1 along the y-axis. Theend control point is thecurrent point (starting point of the curve) shifted bydx2 along the x-axis anddy2 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:
Po′ =Pn = {xo +dx,yo +dy} ;
Pcs = {xo +dx1,yo +dy1} ;
Pce = {xo +dx2,yo +dy2}
S (x2,y2,x,y)+ Draw a smooth cubic Bézier curve from thecurrent point to theend point specified byx,y. Theend control point is specified byx2,y2. Thestart control point is the reflection of theend control point of the previous curve command about thecurrent point. If the previous command wasn't a cubic Bézier curve, thestart 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 thecurrent point to theend point, which is thecurrent point shifted bydx along the x-axis anddy along the y-axis. Theend control point is thecurrent point (starting point of the curve) shifted bydx2 along the x-axis anddy2 along the y-axis. Thestart control point is the reflection of theend control point of the previous curve command about thecurrent point. If the previous command wasn't a cubic Bézier curve, thestart 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%;}
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>    <!-- 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>

Quadratic Bézier curve

QuadraticBézier curves are smooth curve definitions using three points:

starting point (current point)

Po = {xo,yo}

end point

Pn = {xn,yn}

control point

Pc = {xc,yc}(controls curvature)

After drawing, theend point (Pn) becomes thecurrent point for the next command (Po′).

CommandParametersNotes
Q (x1,y1,x,y)+

Draw a quadratic Bézier curve from thecurrent point to theend point specified byx,y. Thecontrol point is specified byx1,y1. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute quadratic Bézier curve (Q) command(s).

Formulae:
Po′ =Pn = {x,y} ;
Pc = {x1,y1}
q (dx1,dy1,dx,dy)+

Draw a quadratic Bézier curve from thecurrent point to theend point, which is thecurrent point shifted bydx along the x-axis anddy along the y-axis. Thecontrol point is thecurrent point (starting point of the curve) shifted bydx1 along the x-axis anddy1 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:
Po′ =Pn = {xo +dx,yo +dy} ;
Pc = {xo +dx1,yo +dy1}
T (x,y)+

Draw a smooth quadratic Bézier curve from thecurrent point to theend point specified byx,y. Thecontrol point is the reflection of thecontrol point of the previous curve command about thecurrent point. If the previous command wasn't a quadratic Bézier curve, thecontrol 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:
Po′ =Pn = {x,y}
t (dx,dy)+

Draw a smooth quadratic Bézier curve from thecurrent point to theend point, which is thecurrent point shifted bydx along the x-axis anddy along the y-axis. Thecontrol point is the reflection of thecontrol point of the previous curve command about thecurrent point. If the previous command wasn't a quadratic Bézier curve, thecontrol 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:
Po′ =Pn = {xo +dx,yo +dy}

Examples

html,body,svg {  height: 100%;}
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="rgb(0 0 0 / 20%)"      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>      <polyline        points="40,50 55,75 70,50"        stroke="rgb(0 0 0 / 20%)"        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>      <polyline        points="70,50 85,25 100,50"        stroke="rgb(0 0 0 / 20%)"        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>

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.

CommandParametersNotes
A (rxryanglelarge-arc-flagsweep-flagxy)+

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

  • rx andry are the two radii of the ellipse;
  • angle represents a rotation (in degrees) of the ellipse relative to the x-axis;
  • large-arc-flag andsweep-flag allows to choose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
    • large-arc-flag allows to choose one of the large arc (1) or small arc (0),
    • sweep-flag allows to choose one of the clockwise turning arc (1) or counterclockwise turning arc (0)
The coordinatex,y becomes the new current point for the next command. All subsequent sets of parameters are considered implicit absolute arc curve (A) commands.
a (rxryanglelarge-arc-flagsweep-flagdxdy)+

Draw an Arc curve from the current point to a point for which coordinates are those of the current point shifted bydx along the x-axis anddy 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 andry are the two radii of the ellipse;
  • angle represents a rotation (in degrees) of the ellipse relative to the x-axis;
  • large-arc-flag andsweep-flag allows to choose 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 counterclockwise arc (0)
The current point gets its X and Y coordinates shifted bydx anddy for the next command. All subsequent sets of parameters are considered implicit relative arc curve (a) commands.

Examples

html,body,svg {  height: 100%;}
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

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

CommandParametersNotes
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 withClosePath 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 thestroke-linejoin setting), rather than just being placed at the same coordinates.

Examples

html,body,svg {  height: 100%;}
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>

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# DProperty
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
# GlyphElementDAttribute
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
# DAttribute

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.

[8]ページ先頭
©2009-2025 Movatter.jp