marker-start, marker-mid et marker-end, propriétés CSS pour SVG

marker-end
marker-mid
marker-start

Résumé des caractéristiques de la propriété marker-end

Description rapide
Définit le dernier marqueur, celui qui s'affiche sur le dernier sommet d'une forme en SVG.
Statut
Standard
Utilisable sur
SVG
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété marker-end passe d'une valeur à l'autre sans transition.
Module W3C
Les marqueurs SVG
Références (W3C)
Statut du document: WD (document de travail)

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 none aucun 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.

  • 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.

Compatibilité des navigateurs avec marker-end.

1
Propriété
marker-start
2
Propriété
marker-mid
3
Propriété
marker-end
Estimation de la prise en charge globale.

Navigateurs 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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Histoire de la propriété marker-end.

  • Les marqueurs SVG

    Concernant marker-end. Introduction des propriétés marker-start, marker-end et marker-mid.

Voir aussi, à propos des marqueurs SVG.

Les marqueurs SVG sont décrits dans le module Les marqueurs SVG. Les propriétés marker-start, marker-end et marker-mid font partie de ce module.

Propriétés :

Marker-end
Définit le dernier marqueur, celui qui s'affiche sur le dernier sommet d'une forme en SVG.
Marker-mid
Définit quel marqueur afficher sur les sommets intermédiaires (ni le dernier, ni le premier) d'une forme en SVG.
Marker-start
Définit le premier marqueur, celui qui sera affiché sur le premier point d'une forme en SVG.