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

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

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
Why did Odeo fail? Lack of Focus
Evan Williams, co-founder of Twitter and Blogger, failed with his first startup, Odeo. What went wrong with Odeo? Williams' first startup was a podcasting company that failed due to a lack of focus. He learned that it's important to stay focused and adapt to changes in the market.
Odeo
Random CSS Property

grid-auto-rows

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.
grid-auto-rows css reference