CSSoffset-distance Property
Example
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%;
}
Try it Yourself »offset-path: path('M 50 80 C 150 -20 250 180 350 80');
offset-distance: 33%;
}
Definition and Usage
Theoffset-distance property sets the distance of an element from the start of the path defined by theoffset-path property.
| Default value: | 0 |
|---|---|
| Inherited: | no |
| Animatable: | yes.Read aboutanimatableTry it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.offsetDistance="200px"Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| offset-distance | 55 | 79 | 72 | 16 | 42 |
CSS Syntax
offset-distance: auto|value|initial|inherit;
Property Values
| 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 aboutinitial |
| inherit | Inherits this property from its parent element.Read aboutinherit |
Related Pages
SVG tutorial:SVG Path
CSS tutorial:CSS Animations
CSS reference:CSS offset property
CSS reference:CSS offset-anchor property
CSS reference:CSS offset-path property
CSS reference:CSS offset-position property
CSS reference:CSS offset-rotate property
