CSS offset-distance Property

The <img> element is placed on its defined path, at a distance 33% from the start of the path.

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

Definition and Usage

The offset-distance property sets the distance of an element from the start of the path defined by the offset-path property.

Default value:	0
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.offsetDistance="200px" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
offset-distance	55.0	79.0	72.0	Not supported	42.0

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

Value	Description
0	The element is placed at the start of its path. This is default.
length	Specifies the elements distance from the start of its path in px, pt, cm, etc. Negative values are not allowed. Read about length units
%	Specifies the distance in percent relative to the lenth of the path.
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

HTML SVG tutorial: SVG Path

CSS offset property: CSS Offset property

CSS offset-anchor property: CSS Offset-anchor property

CSS offset-path property: CSS Offset-path property

CSS offset-rotate property: CSS Offset-rotate property