Marker-start, marker-mid et marker-end, propriétés CSS pour SVG
Résumé des caractéristiques de la propriété marker-end
nonemarker-end passe d'une valeur à l'autre sans transition.Description des propriétés marker-start, marker-mid et marker-end.
Ces trois propriétés définissent quel marqueur ajouter à un tracé en SVG. Les marqueurs sont des éléments graphiques qui peuvent être ajoutés à chacun des sommets d'une forme tracée en SVG. Les marqueurs sont généralement des formes géométriques simples : cercle, triangle, croix, etc. Sur notre exemple ci-dessous, les marqueurs sont :
- Pour le premier sommet, un rond rouge.
- Les sommets intermédiaires sont marqués par un carré vert.
- Enfin, le dernier sommet est un carré bleu.
Toutes les formes SVG ne sont pas pourvues de sommets. Le cercle (circle), c'est une évidence n'en a pas, mais le rectangle (rect) non plus. Les formes qui sont pourvues de sommets sont :
line : une ligne.
Les marqueurs de début et de fin sont présents, mais il n'y a pas de marqueurs intermédiaires.
polyline : une suite de segments de droites.
Tous les marqueurs sont présents.
polygon : une figure fermée composée d'un nombre quelconque de côtés.
Tous les marqueurs sont présents mais celui du début est masqué par celui de la fin.
path : un tracé composé de segments de droites ou de courbes.
Tous les marqueurs sont présents, mais la figure peut être fermée, ce qui masquera la marqueur du début sous celui de la fin.
A titre d'information, voici comment peut se définir un marqueur en SVG. Il s'agit ici du cercle rouge que nous avons utilisé dans nos exemples.
marker id="id1" viewBox="0 0 4 4" refX="2" refY="2" markerWidth="4" markerHeight="4"
circle cx="2" cy="2" r="2" fill="red" stroke="none" /
/marker
Valeurs pour marker-start, marker-mid et marker-end.
- marker-start: none; marker-mid: none; marker-end: none;
Avec la valeur
noneaucun marqueur n'est affiché. - marker-start: url('#id'); marker-mid: url('#id'); marker-end: url('#id');
Les trois propriétés ont la même syntaxe, faisant appel à la fonction
url(). Très souvent, l'URL se résume à un signet (l'identifiant d'un élément SVG défini dans la même page), mais il peut aussi s'agir d'une URL complète comportant le chemin et le nom d'un fichier.
Valeurs communes à toutes les propriétés :
marker-end: initial (none)
marker-end: inherit
marker-end: revert
marker-end: revertLayer
marker-end: unset
marker-mid: initial (none)
marker-mid: inherit
marker-mid: revert
marker-mid: revertLayer
marker-mid: unset
marker-start: initial (none)
marker-start: inherit
marker-start: revert
marker-start: revertLayer
marker-start: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Animation des propriétés marker-start, marker-mid et marker-end.
Les trois propriétés sont animées de la même façon. Cela provoque simplement un clignotement des marqueurs.
Prise en charge par les navigateurs (compatibilité).
marker-startmarker-midmarker-endNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Firefox
Edge
Chrome
Safari
Opéra
Safari sur IOS
Samsung Internet
Opéra Mobile
QQ Browser
Baidu Browser
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historique de la propriété marker-end
Voir aussi, à propos des marqueurs SVG.
Les marqueurs SVG sont décrits dans le module SVG Markers. Les propriétés marker-start, et {markerMid->codeLib}
font partie de ce module.