SVG => marqueur

Syntaxe

<marker viewBox = " xy largeur hauteur " refX = " xoffset " refY = " yoffset " orient = " orientation " ... paramètres facultatifs >
... des éléments dessinant le marqueur ...
</marker >
< elementname marker-start = "url (# markerid )" /> applique un marqueur au début d'un élément
< elementname marker-mid = "url (# markerid )" /> applique un marqueur au milieu d'un segment d'un élément
< elementname marker-end = "url (# markerid )" /> applique un marqueur à la fin d'un élément
Les marqueurs peuvent être appliqués aux éléments <line> , <polyline> , <polygon> et <path>

Paramètres

Paramètre	Détails
viewBox	Spécifie le système d'unité pour les éléments qui dessinent le marqueur
refX	La distance entre l'axe x du système de coordonnées pour dessiner le marqueur doit être décalée par rapport au point de dessin par défaut. La valeur par défaut est 0.
refY	La distance entre l'axe y du système de coordonnées pour dessiner le marqueur doit être décalée par rapport au point de dessin par défaut. La valeur par défaut est 0.
Orient	Les valeurs sont `auto` ou `angle in degrees` et spécifient la rotation appliquée au marqueur. Il est appliqué après tous les autres ajustements de coordonnées (viewBox, preserveAspectRaio et refX, refY). La valeur par défaut est 0. Le calcul de l'angle pour `auto` est complexe - voir la spécification SVG pour plus de détails.
markerUnits	`strokeWidth` ou `userSpaceOnUse` . La valeur par défaut est `strokeWidth` .
markerWidth	Largeur du marqueur dans les unités marqueur. La valeur par défaut est 3.
marqueurHauteur	Hauteur du marqueur dans le marqueurUnits. La valeur par défaut est 3

Remarques

Scripts: les éléments marqueurs rendus ne sont pas exposés dans le DOM, il est donc impossible d'ajuster les propriétés ou les éléments pour des marqueurs rendus spécifiques (bien qu'il soit tout à fait possible de créer un script pour l'élément marqueur défini).

La propriété de overflow de l'élément marqueur est automatiquement définie sur hidden . C'est ce qui coupe tout dessin qui déborde de la tuile du marqueur. Cela peut être explicitement défini comme visible dans CSS. En juillet 2016, Chrome ne prend pas en charge les marqueurs avec overflow: visible - mais une solution consiste à définir un filtre sur l'élément marqueur - ce qui semble désactiver le découpage de débordement.

Les filtres peuvent être appliqués aux éléments d'un marqueur. Bien que cela ne soit pas explicitement autorisé dans la spécification, les filtres semblent également fonctionner lorsqu'ils sont spécifiés sur l'élément marqueur lui-même.

Pour plus de détails sur l'élément marqueur, veuillez consulter la section des marqueurs dans la spécification SVG 1.1 .

Marqueur de base

Voici un exemple de marqueur de fin spécifié avec un nombre minimal de paramètres. Notez que la couleur de trait de l'élément d'origine n'est pas héritée par le marqueur.

<svg width="800px" height="600px">
<defs>
      <marker id="examplemarker"
        viewBox="0 0 10 10" 
        refX="0" refY="5" 
        orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>
  </defs>
  
  <line x1="20" y1="20" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#examplemarker)" />
</svg>

Effets de valeurs alternatives pour refX, refY et orient

Les décalages d'axe pour dessiner le marqueur spécifié par refX et refY sont appliqués avant la rotation spécifiée par le paramètre orient . Ci - dessous vous pouvez voir les effets de différentes combinaisons d' orient et refX , refY pour illustrer cela.

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="0" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="20" refY="20" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="20" refY="20" orient="180" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />
  
  <text x="20" y="150"> refX,Y  (0,5) orient (auto) </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />
  
    <text x="220" y="150"> refX,Y  (0,0) orient (0) </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />
  
      <text x="20" y="390"> refX,Y  (20,20) orient (0) </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />
  
      <text x="220" y="390"> refX,Y  (20,20) orient (180) </text>
</svg>

Effets de valeurs alternatives pour markerUnits, markerWidth, markerHeight

La valeur par défaut pour dessiner des marqueurs est d'utiliser la largeur de trait de l'élément appelant, mais vous pouvez spécifier explicitement que les marqueurs doivent être dessinés à l'aide du système d'unités pour l'élément markerUnits="userSpaceOnUse" le marqueur est appliqué en spécifiant markerUnits="userSpaceOnUse" . Les marqueurs sont dessinés dans une boîte 3x3 markerUnits (3 strokewidth si markerUnits n'est pas spécifié). Mais la largeur et la hauteur de la boîte peuvent être explicitement spécifiées avec markerHeight et markerWidth . Voir ci-dessous les effets de diverses combinaisons de markerUnits , markerHeight et markerWidth .

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="1" markerHeight="1">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="4" markerHeight="4">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="15">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="30" markerHeight="30">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />     
    <text x="20" y="150"> markerUnits = strokeWidth </text>
    <text x="20" y="170"> markerWidth|Height = 1 </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />      
    <text x="250" y="150"> markerUnits = strokeWidth </text>
    <text x="250" y="170"> markerWidth|Height = 4 </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />      
      <text x="20" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="20" y="410"> markerWidth|Height = 15 </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />      
      <text x="250" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="250" y="410"> markerWidth|Height = 30 </text>
</svg>

Marqueurs de début, de milieu et de fin sur les éléments de ligne, polyligne, polygone et chemin

Les éléments peuvent spécifier séparément les marqueurs de début, de milieu et de fin. Vous trouverez ci-dessous des exemples de marqueurs de début, de milieu et de fin pour tous les éléments pouvant être marqués. Veuillez noter que Chrome (juillet 2016) ne calcule pas correctement l'orientation automatique pour les marqueurs de début et de fin des polygones ( bogue n ° 633012 ) et ne place pas correctement les marqueurs médians pour les segments de chemin d'arc ( bug n ° 583097 )

<svg width="800px" height="600px">
<defs>
      <marker id="red-chevron"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="red" />
      </marker>

      <marker id="black-arrow"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
         <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>

      <marker id="red-circle"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <circle fill="red" cx="5" cy="5" r="5" />
      </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
  <text x="20" y="150"> line: marker-mid not applied</text>
  
  <polyline  points="220,20 300,100 400,20" fill="none" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
    <text x="250" y="150"> polyline </text>
   
  <polygon  points="20,190 100,200 150,300 100,350 20,260" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" fill="none" stroke-width="5" stroke="black" />
   <text x="20" y="390"> polygon: end/start overlap </text>
      
  <path d="M250,350 l 25,-25 
        a15,5 -16 0,1 10,-15 l 20,-5 
        a15,10 -16 0,1 10,-15 l 20,-5 
        a15,25 -16 0,1 10,-15 l 20,-5 
        a15,35 -16 0,1 10,-15 l 20,-5"
        fill="none" stroke="green" stroke-width="2" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)"  />
      <text x="250" y="390"> path with arc segments </text>
</svg>

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

SVG
marqueur

Recherche…