<marker>
========

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 (en-US)`, `marker-mid (en-US)`, et `marker-end (en-US)`.

Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```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 (en-US)`

 Définit la hauteur du viewport du marqueur.
 *Valeur*: **<length> (en-US)** ; *Valeur par défaut*: `3`; *Animation*: **oui**

`markerUnits (en-US)`

 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 (en-US)`

 Définit la largeur du viewport du marqueur.
 *Valeur*: **<length> (en-US)** ; *Valeur par défaut*: `3`; *Animation*: **oui**

`orient (en-US)`

 Définit l'orientation du marqueur relativement à la forme à laquelle il est attaché.
 *Valeur*: `auto`|`auto-start-reverse`|**<angle> (en-US)** ; *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 (en-US)`

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

`refY (en-US)`

 Définit la coordonnées y du point de référence du marqueur.
 *Valeur*: `top`|`center`|`bottom`|**<coordinate> (en-US)** ; *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> (en-US)** ; *Valeur par défaut*: none; *Animation*: **oui**

### Attributs globaux

Attributs de base

Notamment: `id (en-US)`, `tabindex (en-US)`

Attributs de style
`class (en-US)`, `style`
Attributs de traitement conditionnel

Notamment: `requiredExtensions`, `systemLanguage (en-US)`

Attributs de présentation

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

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

|  |  |
| --- | --- |
| Catégories | Élément conteneur |
| Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre :Éléments d'animationÉléments descriptifsÉléments de formesÉléments structurelsÉléments de dégradés`<a>`, `<clipPath>`, `<color-profile>`, `<cursor>` (en-US), `<filter>`, `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>` (en-US), `<style>`, `<switch>`, `<text>`, `<view>` (en-US) |

Spécifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # MarkerElement |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Propriétés liées aux marqueurs: `marker-start (en-US)`, `marker-mid (en-US)`, et `marker-end (en-US)`