Offset-path - Propriété CSS

Schéma de la syntaxe de offset-path.

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(), shape().
• 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.

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

Le chemin est le contour du conteneur

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

Propriétés en rapport.

Pour des explications plus détaillées, reportez vous à la page sur la propriété résumée} offset ou aux pages ci-dessous, concernant les autres propriétés ou fonctions en rapport.

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(), shape(). 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 offset-position) 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
• 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.

Exemple d'animation de 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.

1

Déplacement suivant
un chemin

2

Propriété
offset-path

Estimation de la prise en charge globale.

95%

94%

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

Caniuse

Histoire de la propriété offset-path.

• Déplacements suivant un chemin - Niveau 1.

  Concernant offset-path. 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 Déplacements suivant un chemin.. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :