marker-start
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-start pointe vers un marqueur qui sera dessiné sur le premier sommet du chemin de l'élément ; c'est-à-dire à son sommet initial. 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-start dans le SVG.
Pour de nombreuses formes supportant les marqueurs, les premiers et derniers sommets sont au même endroit : 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-start n'aura d'effet que sur les éléments pouvant utiliser des marqueurs SVG. Voir marker-start pour la liste.
Syntaxe
marker-start: none;
marker-start: url("markers.svg#arrow");
/* Valeurs globales */
marker-start: inherit;
marker-start: initial;
marker-start: revert;
marker-start: revert-layer;
marker-start: unset;
Valeurs
none-
Cela signifie qu'aucun marqueur ne sera dessiné au premier sommet du chemin de l'élément.
<marker-ref>-
Une
<url>qui fait référence à un marqueur défini par un élément SVG<marker>, à dessiner au premier sommet du chemin de l'élément. Si la référence d'URL est invalide, aucun marqueur ne sera dessiné au premier 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-start =
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-start: url("#triangle");
}
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # MarkerStartProperty |
Compatibilité des navigateurs
Voir aussi
- La propriété
marker-mid - La propriété
marker-end - La propriété
marker - L'attribut SVG
marker-start