Atributo offset-distance de CSS

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 path start points defined by the attribute.

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

Specifies the distance between the element and the path start using fixed units (such as px, pt, cm, etc.).

Negative values are not allowed. See:Unidades CSS.
% Specifies a 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 browser version that first fully supports this attribute.

Chrome Edge Firefox Safari Opera
55 79 72 16 42

Páginas relacionadas

Tutoriales:Rutas SVG

Tutoriales:CSS animación

Referencia:Atributo offset de CSS

Referencia:Atributo offset-anchor de CSS

Referencia:Atributo offset-path de CSS

Referencia:Atributo offset-position de CSS

Referencia:Atributo offset-rotate de CSS