<marker>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

L'élément <marker> définit un élément graphique qui pourra être utilisé pour dessiner des pointes de flèches ou des polymarqueurs sur un élément <path>, <line>, <polyline> ou <polygon>.

Les marqueurs sont attachés aux formes à l'aide des propriétés marker-start, marker-mid, et marker-end.

Exemple

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Définit une pointe de flèche -->
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="6" markerHeight="6"
        tart-reverse">
                         <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <!-- Définit un simple point -->
    <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="5" markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>

  <!-- Dessine les axes des coordonnées avec des pointes de flèche à chaque bout -->
  <polyline points="10,10 10,90 90,90" fill="none" stroke="black"
   marker-start="url(#arrow)" marker-end="url(#arrow)"  />

  <!-- Dessine une ligne avec un simple point entre chaque segment -->
  <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
   marker-start="url(#dot)" marker-mid="url(#dot)"  marker-end="url(#dot)" />
</svg>

Attributs

markerHeight

Définit la hauteur du viewport du marqueur. Valeur: <length> ; Valeur par défaut: 3; Animation: oui

markerUnits

Définit le système de coordnnées pour les attributs markerWidth, markerHeight et le contenu du <marker>. Valeur: userSpaceOnUse|strokeWidth ; Valeur par défaut: strokeWidth; Animation: oui

markerWidth

Définit la largeur du viewport du marqueur. Valeur: <length> ; Valeur par défaut: 3; Animation: oui

orient

Définit l'orientation du marqueur relativement à la forme à laquelle il est attaché. Valeur: auto|auto-start-reverse|<angle> ; Valeur par défaut: 0; Animation: oui

preserveAspectRatio

Définit comment le fragment svg doit être déformé s'il est incorporé dans un conteneur avec un rapport hauteur:largeur différent de celui du marqueur. Valeur: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Valeur par défaut: xMidYMid meet; Animation: oui

refX

Définit la coordonnées x du point de référence du marqueur. Valeur: left|center|right|<coordinate> ; Valeur par défaut: 0; Animation: oui

refY

Définit la coordonnées y du point de référence du marqueur. Valeur: top|center|bottom|<coordinate> ; Valeur par défaut: 0; Animation: oui

viewBox

Définit la limite de la zone de dessin pour le fragment SVG. Valeur: <list-of-numbers> ; Valeur par défaut: none; Animation: oui

Attributs globaux

Attributs de base

Notamment: id, tabindex

Attributs de style

class, style

Attributs de traitement conditionnel

Notamment: requiredExtensions, systemLanguage

Attributs de présentation

Notamment: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

Attributs ARIA

aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Notes d'usage

Spécifications

Specification
Scalable Vector Graphics (SVG) 2
# MarkerElement

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
marker
markerHeight
markerUnits
markerWidth
orient
refX
refY
viewBox

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi