path()
Quick Summary for 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.
Code Usage for path()
path(<string>) 
More Details for path()

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

See also

<shape-outside> CSS Shapes Overview of CSS Shapes SVG Path Syntax Illustrated Guide

Last modified: Feb 5, 2022, by MDN contributors

Select your preferred language English (US)Français Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Me
Random CSS Property

flex-basis

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
flex-basis css reference