Firefox Tomorrow

css property

`d` CSS property

View on MDN ↗

The d CSS property defines a path to be drawn by the SVG <path> element. If present, it overrides the element’s d attribute.

[!NOTE] The d property only applies to <path> elements nested in an <svg>. It doesn’t apply to other SVG elements nor to HTML elements or pseudo-elements.

Syntax

/* Default */
d: none;

/* Basic usage */
d: path("m 5,5 h 35 L 20,30 z");
d: path("M 0,25 l 50,150 l 200,50 z");
d: path("M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z");

/* Global values */
d: inherit;
d: initial;
d: revert;
d: revert-layer;
d: unset;

Values

The value is either a path() function with a single &lt;string&gt; parameter or the keyword none:

  • none
    • : No path is drawn.
  • path(<string>)
    • : A path() function with a quoted data string parameter. The data string defines an SVG path. The SVG path data string contains path commands that implicitly use pixel units. An empty path is considered invalid.

Formal definition

Formal syntax

Examples

Specifying path data

This example demonstrates the basic use case of d, and how the CSS d property takes precedence over the d attribute.

HTML

We include two identical <path> elements in an SVG; their d attribute values are "m 5,5 h 90 v 90 h -90 v -90 z", which creates a 90px square.

<svg>
  <path d="m 5,5 h 90 v 90 h -90 v -90 z" />
  <path d="m 5,5 h 90 v 90 h -90 v -90 z" />
</svg>

CSS

With CSS, we style both paths, providing a black stroke and semi-opaque red fill. We then use the d property to override the value of the SVG d attribute for the last path only. The browser renders SVG images as 300px wide and 150px tall by default.

svg {
  border: 1px solid;
}

path {
  fill: #ff333388;
  stroke: black;
}

path:last-of-type {
  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"
  );
}

Results

Interactive exampleOpen the canonical MDN source to run this embedded demo.

The second <path> is a heart, as defined in the CSS d property’s path() function value. The unstyled <path>’s path remained a square, as defined in its SVG d attribute value.

Animating data paths

This example demonstrates animating the d attribute value.

HTML

We create a <svg> containing a single <path> element.

<svg>
  <path />
</svg>

CSS

We use the d attribute to define a heart with a line through it. We use CSS to define the fill, stroke, and stroke-width of that path, and add a two-second transition. We add a :hover style that contains a slightly different path() function; the path has the same number of data points as the default state, making the path animatable.

svg {
  border: 1px solid;
}

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 M90,5 L5,90"
  );
  transition: all 2s;
  fill: none;
  stroke: red;
  stroke-width: 3px;
}

svg: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"
  );
  stroke: black;
}

Results

Interactive exampleOpen the canonical MDN source to run this embedded demo.

To view the animation, hover over the SVG.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also