path()
The path()
CSS function accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn. The path()
function is a <basic-shape>
data type value. It can be used in the CSS offset-path
and clip-path
properties and in the SVG d
attribute.
Try it
Syntax
When used in offset-path
or d
:
path(<string>)
When used in clip-path
:
path( [<fill-rule>,]? <string> )
Parameters
<fill-rule>
Optional-
An optional value of
nonzero
(the default when omitted) orevenodd
, which defines how the inside of the shape to be filled is determined.Note:
<fill-rule>
is not supported inoffset-path
and using it invalidates the property. <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> )
<fill-rule> =
nonzero |
evenodd
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 1 # funcdef-basic-shape-path |
Browser compatibility
BCD tables only load in the browser