Offset-path - Propriété CSS

offset-path

Résumé des caractéristiques de la propriété `offset-path`

Description rapide

Définit le chemin sur lequel pourra se posiitionner un élément (Motion path).

Statut

Standard

Utilisable sur

HTML, SVG

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Voir le chapitre Animation

Module W3C

Déplacements suivant un chemin.

Références (W3C)

Motion Path - Level 1.

Statut du document: WD (document de travail)

Schéma syntaxique de `offset-path`.

Schéma syntaxique de la propriété offset-path
Les liens du schéma donnent accès à plus de détails

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

Forme de base une forme définie par l'une des fonctions géométriques de base : circle(), ellipse(), inset(), path(), polygon().
box : une boîte définie par stroke-box, fill-box, etc.

Description de la propriété `offset-path`.

La propriété offset-path définit le chemin suivant lequel il sera possible de déplacer un élément. Reportez-vous à la propriété résumée offset pour une présentation complète des déplacements suivant un chemin (Motion Path).

Le chemin peut être un tracé rectiligne, une forme géométrique (cercle, ellipse, etc.), la bordure d'un élément, ou être de n'importe quelle autre forme. L'orientation de l'élément mobile est automatiquement alignée sur l'axe du chemin.

Voici quelques exemples. La position de l'élément mobile a été animée pour que le chemin apparaissent mieux, mais l'animation n'est pas obligatoire.

Motion path - Le chemin est une forme simple (ellipse)

Le chemin est une forme géométrique
ici une ellipse

Motion path - Le chemin est une boîte (stroke-box)

Le chemin est le contour du conteneur

Motion path - Le chemin est une forme complexe (path)

Le chemin est une forme complexe
définie par le fonction path()

Valeurs pour `offset-path`.

offset-path: none;

Aucun chemin n'est défini. Cette valeur peut être utile pour annuler une information de chemin récupérée par la cascade des héritages.
offset-path: circle(30%);

Le chemin et une forme géométrique basique, définie par l'une des fonctions circle(), ellipse(), inset(), path(), polygon(). Reportez-vous à la description détaillée de ces fonctions pour plus d'informations.

offset-path:circle(40px)

offset-path:ellipse(80px 20px)

offset-path:inset(10px)
offset-path: fill-box; offset-path: stroke-box; offset-path: view-box;

La boîte spécifiée est utilisée comme chemin. Ce sera donc le contour du conteneur, incluant ou non les marges intérieures (padding) qui servira de chemin. Notez que les arrondis d'angle éventuels (border-radius) sont inclus dans le chemin.

Ci-dessous, l'élément mobile rouge parcourt le chemin suivant stroke-box, tandis que l'élément bleu parcourt fill-box. La différence dépend des marges intérieures (padding) de l'élément.
offset-path: ray(45deg); offset-path: ray(45deg closest-side);

La fonction ray(), spécifique à cet usage, définit un chemin rectiligne partant du centre et se dirigeant vers la bordure, suivant l'angle indiqué. Le centre est pas défaut le centre du conteneur, mais peut être déplacé avec la propriété offset-position.

Le deuxième paramètre de la fonction ray(), optionnel, donne la longueur du chemin. Les valeurs suivantes sont acceptées pour ce deuxième paramètre :
- closest-side : le chemin s'étend jusqu'au bord d'un cercle tangent au bord le plus proche. C'est la valeur par défaut.
- farthest-side : le chemin s'étend jusqu'au bord d'un cercle tangent au bord le plus éloigné.
- closest-corner : le chemin s'étend jusqu'au bord d'un cercle s'étendant jusqu'à l'angle le plus proche.
- farthest-corner : le chemin s'étend jusqu'au bord d'un cercle s'étendant jusqu'à l'angle le plus éloigné.
- sides : le chemin s'étend jusqu'à la bordure du conteneur. La longueur du chemin est donc différente suivant l'angle choisi.
Remarque : si la position du chemin (définie par ) est sur un des bords de l'élément, le chemin peut avoir une longueur nulle.

Dans les exemples ci-dessous, la position du chemin a été décalée avec offset-position afin de mieux illustrer l'effet des différentes valeurs.

closest-side

farthest-side

closest-corner

farthest-corner

sides
offset-path: ray(45deg closest-side contain);

L'option contain peut être ajoutée à la syntaxe précédente. Elle limite la longueur du chemin de façon à ce que l'élément mobile soit toujours inclus en entier dans la zone de déplacement.

farthest-side sans l'option contain

farthest-side avec l'option contain

sides sans l'option contain

sides avec l'option contain
offset-path: url(...);

Cette syntaxe, avec la fonction url(), permet de faire référence à un élément SVG défini dans un fichier séparé, ou dans la page courante. Pour la clarté des explications, le fichier SVG a été rendu visible ci-dessous, mais ce n'est pas obligatoire.

offset-path:url('#chemin1');

<svg width="200" height="150"> <path id="chemin1" d="M0 75 Q25 -50, 50 75 Q75 200, 100 75 ..." fill="none" stroke="blue"/> </svg>

SVG

Valeurs communes à toutes les propriétés :


offset-path: initial  (none)
offset-path: inherit
offset-path: revert
offset-path: revertLayer
offset-path: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `offset-path`.

La propriété offset-path peut être animée de façon progressive lorsque le chemin est défini via une fonction de forme (circle(), inset(), etc.) en faisant évoluer les paramètres numériques de ces fonctions. Mais l'animation peut également passer brutalement d'une valeur à l'autre si le chemin est défini par une valeur prédéfinie comme stroke-box, fill-box, etc.

Dans l'exemple ci-dessous, l'élément mobile parcourt une spirale. Ceci a été obtenu en combinant deux animations : une sur la propriété offset-distance, et une autre, plus lente, sur la propriété offset-path.

Prise en charge par les navigateurs.

Déplacement suivant
un chemin

Propriété
offset-path

Estimation de la prise en charge globale.

94%

92%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari sur IOS

Safari

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `offset-path`.

Déplacements suivant un chemin - Niveau 1.

Introduction de la propriété offset-path.

09 Avril 2015
Document de travail.

Voir aussi, au sujet des Motion Path.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété offset-path fait partie du module Motion Path.. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

offset

Propriété résumée définissant tous les paramètres concernant le déplacement suivant un chemin (Motion Path).

offset-anchor

Définit le point d'ancrage des élément mobile, dans le contexte du déplacement sur un chemin (Motion Path).

offset-distance

Définit l'emplacement d'un élément mobile sur le trajet du chemin (Motion Path).

offset-position

Définit la position d'un chemin de déplacement, dans le contexte d'un déplacement suivant un chemin (Motion Path).

offset-rotate

Définit l'orientation d'un élément par rapport à l'axe du chemin (Motion Path).