marker-end
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.
La propriété CSS marker-end pointe vers un marqueur qui sera dessiné sur le dernier sommet du chemin de l'élément ; c'est-à-dire à son sommet final. Le marqueur doit avoir été défini à l'aide d'un élément SVG <marker> et ne peut être référencé qu'avec une valeur <url>. La valeur de la propriété CSS remplace toute valeur de l'attribut marker-end dans le SVG.
Pour de nombreuses formes supportant les marqueurs, les premiers et derniers sommets sont le même point : par exemple, le coin supérieur gauche d'un <rect>. Dans ces formes, si les marqueurs de début et de fin sont tous deux définis, deux marqueurs seront dessinés à cet endroit, bien qu'ils ne pointent pas forcément dans la même direction.
Note :
La propriété marker-end n'aura d'effet que sur les éléments pouvant utiliser des marqueurs SVG. Voir marker-end pour la liste.
Syntaxe
marker-end: none;
marker-end: url("markers.svg#arrow");
/* Valeurs globales */
marker-end: inherit;
marker-end: initial;
marker-end: revert;
marker-end: revert-layer;
marker-end: unset;
Valeurs
none-
Cela signifie qu'aucun marqueur ne sera dessiné au dernier sommet du chemin de l'élément.
<marker-ref>-
Une valeur de type
<url>qui fait référence à un marqueur défini par un élément SVG<marker>, à dessiner au dernier sommet du chemin de l'élément. Si la référence d'URL est invalide, aucun marqueur ne sera dessiné au dernier sommet du chemin.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg |
| Héritée | oui |
| Valeur calculée | comme spécifié mais avec les valeurs url() rendues absolues |
| Type d'animation | discrète |
Syntaxe formelle
marker-end =
none |
<marker-ref>
<marker-ref> =
<url>
Exemples
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker
id="triangle"
viewBox="0 0 10 10"
markerWidth="10"
markerHeight="10"
refX="1"
refY="5"
markerUnits="strokeWidth"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
</marker>
</defs>
<polyline
id="test"
fill="none"
stroke="black"
points="20,100 40,60 70,80 100,20" />
</svg>
polyline#test {
marker-end: url("#triangle");
}
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # MarkerEndProperty |
Compatibilité des navigateurs
Voir aussi
- La propriété
marker-start - La propriété
marker-mid - La propriété
marker - L'attribut SVG
marker-end