Path() - Function CSS

Description of the path() function.

The path() function returns a shape defined by a path in the SVG syntax. This shape can be used to clip an element (with the clip-path property) or to define outlining a non-rectilinear shape (with the shape-outside property).

path() function can be used with:

• clip-path : Defines the visible part of the element, delimited by a geometric shape (rectangle, polygon, etc.).
• offset-path : Defines the path on which an element can be positioned (Motion Path).
• shape-outside : Sets the shape of the text outline for a floating element.

Syntax of the path() function.

• clip-path: path('M 20 50 L 80 90 ... Z'); c1 x1 y1 c2 x2 y2 ...

  The parameter of path() is a path described in the SVG syntax. It is a succession of groups each starting by a command character (c1, c2, etc.), followed possibly by coordinates.
  The most common command characters are given below, but refer to the tutorial on the SVG paths for a more complete presentation of SVG paths.

  1. M x y: (Move to) moves to the point x,y without tracing.
  2. L x y: (Line to) draws a straight line to the point with x,y coordinates.
  3. H x : (Horizontal to) draws a horizontal line to the x-axis.
  4. V y: (Vertical to) draws a vertical line to the y-ordinate.
  5. W: Close the path: draw a straight line to the starting point of the path.

Example paths for the function path().

SVG Paths - Tutorial.

Principle.

SVG paths allow you to describe any path by breaking it down into a succession of lines and/or curves. If this path is closed (if it returns to its starting point), it defines a shape. The syntax of an SVG path is a succession of commands, each starting with a command character, which is followed possibly parameters:

M 20 20 L 80 20

In this example, the first command M 20 20 indicates to move to the point with coordinates 20,20, The second command indicates to draw a line from the current point to the point with coordinates 80.20.

Note that the different coordinates are indicated without units: SVG works in pixels, unlike CSS which requires that the unit be indicated.

Absolute or relative coordinates.

When the command character is uppercase, the numbers that follow are considered absolute coordinates. The reference point (0,0) is located at the top left of the element.
Conversely, if the command character is lowercase, the numbers that follow are considered a displacement value compared to the current point.

The examples below are all constructed in a square frame of 100 pixels on each side, the origin of which, the point (0,0) is located in the top left corner.

Drawing straight lines.

There are several commands that can be used to draw lines:

• M x y : (Move to) moving without tracing to the point (x,y).
• L x y : (Line to) moving with a straight line to the point (x,y).
• H x : (Horizontal line to) draw a horizontal line to the horizontal position x.
• V y : (Vertical line to) draw a horizontal line to the vertical position y.
• Z : terminal character indicating to return to the starting point to close the path.

Some examples of line plots only with absolute coordinates:

Examples of line plots that also use relative coordinates:

Drawing elliptical arcs.

A single command character allows you to insert an elliptical arc into the path. I must be followed by 7 parameters:

A rx ry a s1 s2 fx fy

• rx is the horizontal radius of the ellipse and ry is the vertical radius. Of course, if these two values are equal, we get an arc of a circle.
• a is the angle of inclination of the ellipse.
• s1 and s2 define which direction the plot should be made (clockwise or counterclockwise). Both of these parameters can be set to 0 or 1.
• fx and fy define the point at which the plot will stop. If necessary, the second part of the path can be distorted to pass through this terminal point.

If the character a is lowercase, only the last two parameters (the break point) will be considered as relative coordinates.

Plotting a quadratic Bézier curve.

The Q command draws a curve segment of the "Quadratic Bezier" type. It is sufficient to define two points: the first point defines the tangents to the curve at the start point and the end point, while the second point is the end point. These two pairs of coordinates are separated by a comma.
Here is an example on which we have materialized the points. The plot area measures 200 pixels on each side:

Drawing a cubic Bézier curve.

The C command draws a curve segment of the "Cubic Bézier" type. This type of curve requires the definition of three points. The first two fix the tangents to the curve respectively at the point of departure and the point of arrival. The third and final point is the end point of the curve.
See the example below to understand what these points mean:

The S command, used after a C command or another S command, extends the curve Bézier to a new point, while maintaining the same slope at the point of connection with the previous curve. You can thus chain several curves while keeping a very fluid path, without angles.

Simulator.

This interactive example shows just two ways to slice from an SVG path, but of course the possibilities are endless.

Browsers compatibility.

1

Basic
shapes

2

path()
function

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Chrome

Safari

Firefox

Safari sur IOS

Edge

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

path() function historic.

• CSS Shapes Module Level 1

  Definition of the path() function.
  

  June 20, 2013

  Working Draft.

  

  March 20, 2014

  Candidate Recommendation.

  

  

See also, in the same standardization module as path().

The path() function is part of the CSS Shapes Module. The following definitions are also described in this same module. See CSS Shapes Module for more information.

Properties:

shape-image-threshold

Sets the transparency threshold for the wrapping of an image.

shape-margin

Sets the margin for wrapping a floating element.

shape-outside

Sets the shape of the text outline for a floating element.

Functions:

circle()

Defines a circle that can be used to clip an element or set a circumvention margin.

ellipse()

Defines an ellipse.

inset()

Defines a rectangle, which can be used to cut out an element.

polygon()

Defines a shape