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.

Syntax

When used in offset-path or d:

path(<string>)

When used in clip-path:

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

Parameters

<'fill-rule'>: The filling rule for the interior of the path. Possible values are nonzero or evenodd. The default value is nonzero. See fill-rule for more details.
<string>: The string is a data string for defining an SVG path.

Examples

Examples of correct values for path()

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

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

<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 2 # funcdef-basic-shape-path

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`path`	46 Only supported on the `offset-path` property.	79 Only supported on the `offset-path` property.	91-97 With the preference enabled, the `d` SVG presentation attribute, `clip-path` CSS property, and `offset-path` CSS property support `path()`. 64-71 With the preference enabled, the `clip-path` and `offset-path` properties support `path()`. 63 ["From version 97, the `d` SVG presentation attribute supports `path()`.", "From version 71, the `clip-path` property supports `path()`.", "Before version 71, only the `offset-path` property supports `path()`."]	No	33 Only supported on the `offset-path` property.	No	46 Only supported on the `offset-path` property.	46 Only supported on the `offset-path` property.	63 ["From version 97, the `d` SVG presentation attribute supports `path()`.", "From version 79, the `clip-path` property supports `path()`.", "Before version 79, only the `offset-path` property supports `path()`."]	33 Only supported on the `offset-path` property.	No	5.0 Only supported on the `offset-path` property.

Name	CSS
Version
Badge
Last Updated	2022-04-27T17:24:15Z