path()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2020.
* Some parts of this feature may have varying levels of support.
La fonction CSS path() accepte une chaîne de caractères représentant un tracé SVG et permet de dessiner une forme dans les modules formes CSS et chemin de déplacement CSS. La fonction path() est une valeur du type de donnée <basic-shape>. Elle peut être utilisée dans les propriétés CSS offset-path et clip-path, ainsi que dans l'attribut SVG d.
Il existe certaines limitations à l'utilisation de la fonction path(). Le tracé doit être défini comme une seule chaîne de caractères, il n'est donc pas possible de créer un tracé personnalisé à l'aide de variables (fonctions var()). De plus, toutes les longueurs du tracé sont implicitement définies en pixels (px) ; aucune autre unité n'est acceptée. La fonction shape() offre plus de flexibilité que la fonction path().
Exemple interactif
clip-path: path(
"M 20 240 \
L 20 80 L 160 80 \
L 160 20 L 280 100 \
L 160 180 L 160 120 \
L 60 120 L 60 240 Z"
);
clip-path: path(
"M 20 240 \
C 20 0 300 0 300 240 Z"
);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#default-example {
background: #ffee99;
}
#example-element {
background: linear-gradient(to bottom right, #ff5522, #0055ff);
width: 100%;
height: 100%;
}
Syntaxe
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")
/* Utilisé uniquement avec clip-path */
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")
Paramètres
<fill-rule>Facultatif-
Définit quelles parties du tracé sont à l'intérieur de la forme. Les valeurs possibles sont :
-
nonzero: Un point est considéré comme étant à l'intérieur de la forme si un rayon tracé depuis ce point croise plus de segments du tracé de gauche à droite que de droite à gauche, ce qui donne un compte non nul. C'est la valeur par défaut si<fill-rule>est omis. -
evenodd: Un point est considéré comme étant à l'intérieur de la forme si un rayon tracé depuis ce point croise un nombre impair de segments du tracé. Cela signifie que chaque fois que le rayon entre dans la forme, il n'en est pas sorti un nombre égal de fois, indiquant un nombre impair d'entrées sans sorties correspondantes.
Attention :
<fill-rule>n'est pas pris en charge dansoffset-pathet son utilisation invalide la propriété. -
<string>-
Une chaîne de données, placée entre guillemets, qui définit un tracé SVG. La chaîne de données du tracé SVG contient des commandes de tracé qui utilisent implicitement l'unité pixel. Un tracé vide est considéré comme invalide.
Valeur de retour
Retourne une valeur <basic-shape>.
Syntaxe formelle
<path()> =
path( <'fill-rule'>? , <string> )
<fill-rule> =
nonzero |
evenodd
Exemples
Utiliser la fonction path() comme valeur de offset-path
Une fonction path() est utilisée comme valeur de offset-path dans l'exemple suivant pour créer un chemin elliptique le long duquel une balle se déplace.
<div id="path">
<div id="ball"></div>
</div>
<button>animer</button>
#path {
margin: 40px;
width: 400px;
height: 200px;
/* dessine la rampe grise */
background: radial-gradient(at 50% 0%, transparent 70%, grey 70%, grey 100%);
}
#ball {
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
/* marque le chemin elliptique */
offset-path: path("M 15 15 A 6 5.5 10 0 0 385 15");
}
const btn = document.querySelector("button");
const ball = document.getElementById("ball");
btn.addEventListener("click", () => {
btn.setAttribute("disabled", true);
setTimeout(() => btn.removeAttribute("disabled"), 6000);
ball.animate(
// anime la distance sur le chemin
{ offsetDistance: [0, "100%"] },
{
duration: 1500,
iterations: 4,
easing: "cubic-bezier(.667,0.01,.333,.99)",
direction: "alternate",
},
);
});
Modifier la valeur de l'attribut d du tracé SVG
La fonction path() peut être utilisée pour modifier la valeur de l'attribut d d'un tracé SVG, qui peut aussi être défini à none dans votre CSS.
Le symbole « V » se retournera verticalement au survol, si d est pris en charge comme propriété CSS.
CSS
html,
body,
svg {
height: 100%;
}
/* Ce tracé s'affiche au survol */
#svg_css_ex1:hover path {
d: path("M20,80 L50,20 L80,80");
}
HTML
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>
Résultat
Spécifications
| Specification |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-path |
Compatibilité des navigateurs
Loading…
Voir aussi
<shape-outside>- Le module des formes CSS
- Présentation des formes CSS
- Guide illustré de la syntaxe du tracé SVG (angl.) sur CSS-tricks (2021)