path() - Fonction CSS
Résumé des caractéristiques de la fonction path()
Description de la fonction path().
La fonction path() renvoie une forme définie par un chemin dans la syntaxe SVG.
Cette forme peut être utilisée pour découper un élément (avec la propriété clip-path) ou pour définir
le contournement d'une forme non rectiligne (avec la propriété shape-outside).
La fonction path() peut être utilisée avec :
clip-path: Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)shape-outside: Définit le contournement du texte pour un élément flottant.
Syntaxe de la fonction path().
- clip-path: path('M 20 50 L 80 90 ... Z'); c1 x1 y1 c2 x2 y2 ...
Le paramètre de
path()est un chemin décrit dans la syntaxe SVG. C'est une succession de groupes commençant chacun par un caractère de commande (c1,c2, etc.), suivi éventuellement de coordonnées.
Les caractères de commande les plus courants sont donnés ci-dessous, mais reportez-vous au tutoriel sur les chemins SVG pour une présentation plus complète des chemins SVG.M x y: (Move to) se déplace jusqu'au point x,y sans tracer.L x y: (Line to) trace une ligne droite jusqu'au point de coordonnées x,y.H x: (Horizontal to) trace une ligne horizontale jusqu'à l'abscisse x.V y: (Vertical to) trace une ligne verticale jusqu'à l'ordonnée y.Z: ferme le chemin : trace une ligne droite jusqu'au point de départ du chemin.
Exemples de chemins pour la fonction path().
Les chemins SVG - Tutoriel.
Principe.
Les chemins SVG permettent de décrire n'importe quelle tracé en le décomposant en une succession de lignes et/ou de courbes.
Si ce tracé est refermé (s'il revient sur son point de départ) il définit une forme.
La syntaxe d'un chemin SVG est une succession de commandes, commençant chacune par un caractère de commande, lequel est suivi
éventuellement de paramètres :
M 20 20 L 80 20
Dans cet exemple, la première commande M 20 20 indique de se déplacer jusqu'au point de coordonnées 20,20,
la deuxième commande indique de tracer une droite depuis le point actuel jusqu'au point de coordonnées 80,20.
Notez que les différentes coordonnées sont indiquées sans unité : SVG travaille en pixels, contrairement à CSS qui exige que l'unité soit indiquée.
Coordonnées absolues ou relatives.
Lorsque le caractère de commande est en majuscule, les nombres qui suivent sont considérées comme des coordonnées absolues.
Le point de référence (0,0) étant situé en haut à gauche de l'élément.
A l'inverse, si le caractère de commande est en minuscule, les nombres qui suivent sont considérés comme une valeur de déplacement
par rapport au point actuel.
Les exemples ci-dessous sont tous construits dans un cadre carré de 100 pixels de côté, dont l'origine (le point (0,0) est située dans le coin en haut à gauche.
Tracé de lignes droites.
Plusieurs commande permettent de tracer des lignes :
M x y: (Move to) déplacement sans tracer jusqu'au point (x,y).L x y: (Line to) déplacement avec tracé d'une droite jusqu'au point (x,y).H x: (Horizontal line to) trace une droite horizontale jusqu'à la position horizontale x.V y: (Vertical line to) trace une droite verticale jusqu'à la position verticale y.Z: caractère terminal indiquant de revenir au point de départ pour fermer le tracé.
Quelques exemples de tracés de lignes uniquement avec des coordonnées absolues :
M 20 30
L 50 20
L 80 70M 20 30
L 50 20
L 80 70
ZM 20 20 H 80
M 50 20 V 80Exemples de tracés de lignes utilisant également des coordonnées relatives :
M 20 20
l 30 60
l 30 -60M 20 20 h 60
v 60 h -60
v -60M 20 20 l 10 10
m 10 10 l 10 10
m 10 10 l 10 10Tracé d'arcs elliptiques.
Un seul caractère de commande permet d'insérer un arc elliptique dans le chemin. I doit être suivi de 7 paramètres :
A rx ry a s1 s2 fx fy
rxest le rayon horizontal de l'ellipse etryle rayon vertical. Bien entendu, si ces deux valeurs sont égales, on obtient un arc de cercle.aest l'angle d'inclinaison de l'ellipse.s1ets2définissent dans quel sens doit s'effectuer le tracé (sens horaire ou anti-horaire). Ces deux paramètres peuvent prendre les valeurs0ou1.fxetfydéfinissent le point sur lequel le tracé va s'arrêter. Si nécessaire, la deuxième partie du tracé peut être déformée pour passer par ce point terminal.
Si le caractère a est en minuscule, seuls les deux derniers paramètres (le point d'arrêt) seront considérés comme des
coordonnées relatives.
M 30 50
A 20 40 0 0 1 70 50M 30 50
A 20 40 30 0 1 70 60M 30 50
A 20 40 0 0 0 70 50Tracé d'une courbe de Bézier quadratique.
La commande Q trace un segment de courbe du type "Bézier quadratique". Il suffit de définir deux points : le premier point
définit les tangentes à la courbe au point de départ et au point d'arrivée, tandis que le deuxième point est le point d'arrivée.
Ces deux paires de coordonnées sont séparées par une virgule.
Voici un exemple sur lequel nous avons matérialisé les points. La zone de tracé mesure 200 pixels de côté :
M 25 120
Q 100 20,170 160Tracé d'une courbe de Bézier cubique.
La commande C trace un segment de courbe du type "Bézier cubique". Ce type de courbe nécessite de définir trois points.
Les deux premiers fixent les tangentes à la courbe respectivement au point de départ et au point d'arrivée.
Le troisième et dernier point est le point d'arrivée de la courbe.
Voyez l'exemple ci-après pour bien comprendre à quoi correspondent ces points :
M 25 120
C 70 20, 180 30, 170 160
La commande S, utilisée après une commande C ou une autre commande S prolonge la courbe
de Bézier déjà existante jusqu'à un nouveau point, tout en conservant la même pente au point de raccordement avec la courbe
précédente.
On peut ainsi enchaîner plusieurs courbe en gardant un tracé très fluide, sans angle.
M 25 120
C 70 20, 150 30, 120 100
S 160 180, 170 150Simulateur.
Cet exemple interactif présente simplement deux possibilités de découpe à partir d'un chemin SVG, mais bien entendu les possibilités sont infinies.
Prise en charge par les navigateurs (compatibilité).
path().
path()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que path().
Les spécifications CSS éditées par le W3C sont organisées en modules. path() fait partie du Module CSS - Formes de base (CSS Shapes Module). Les définitions suivantes sont également décrites dans ce même module.