CSS offset-distance property

Definition and Usage

offset-distance The attribute is used to set the distance between the element and the path defined by offset-path Distance between the start points of the paths defined by the attributes.

Example

The <img> element is placed at a position 33% from the start of the defined path.

img {
  offset-path: path('M 50 80 C 150 -20 250 180 350 80');
  offset-distance: 33%;
}

Try It Yourself

CSS Syntax

offset-distance: auto|length|initial|inherit;

Attribute Value

Value Description
0 The element is placed at the start of the path. Default value.
length

Use fixed units (such as px, pt, cm, etc.) to specify the distance between the element and the path start.

Negative values are not allowed. See:CSS Units.
% Specifies the percentage distance relative to the path length.
initial Sets this property to its default value. See: initial.
inherit Inherits this property from its parent element. See: inherit.

Technical Details

Default Value: 0
Inheritance: No
Animation Creation: Supported. See:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.offsetDistance="200px"

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
55 79 72 16 42

Related Pages

Tutorial:SVG Path

Tutorial:CSS Animation

Reference:CSS offset property

Reference:CSS offset-anchor property

Reference:CSS offset-path property

Reference:CSS offset-position property

Reference:CSS offset-rotate property