path()

The path() CSS function accepts an SVG path string, and is used in CSS Shapes and CSS Motion Path to enable a shape to be drawn.

Try it

Syntax

When used in offset-path or d:

css
path(<string>)

When used in clip-path:

css
path([<'fill-rule'>,]?<string>)

Parameters

<fill-rule> Optional

An optional value of nonzero (the default when omitted) or evenodd, which specifies the filling rule.

<string>

A data string for defining an SVG path. The syntax for the contents of this <string> is identical to SVG.

Return value

Returns a <basic-shape> value.

Formal syntax

<path()> = 
path( <'fill-rule'>? , <string> )

Examples

Examples of correct values for path()

css
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");

Use as the value of offset-path

The path() function is used to create a path for the item to travel round. Changing any of the values will cause the path to not neatly run round the circle.

Modify the value of the SVG path d attribute

The path() can be used to modify the value of the SVG d attribute, which can also be set to none in your CSS.

The "V" symbol will flip vertically when you hover over it, if d is supported as a CSS property.

CSS

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

/* This path is displayed on hover*/
#svg_css_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}

HTML

html
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>

Result

Specifications

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-path

Browser compatibility

BCD tables only load in the browser

See also