je serais ravi de vous expliquer comment concevoir des lignes en SVG (Scalable Vector Graphics) avec divers exemples. SVG est un langage basé sur XML utilisé pour décrire des graphiques vectoriels bidimensionnels. Les lignes en SVG peuvent être créées à l'aide de l'élément <line>.

Voici la structure de base d'une ligne en SVG :

xml
<svg width="300" height="200">
  <line x1="50" y1="50" x2="250" y2="150" stroke="black" stroke-width="2" />
</svg>

Explication des attributs :

  • x1, y1: coordonnées du point de départ de la ligne.
  • x2, y2: coordonnées du point d'arrêt de la ligne.
  • stroke: couleur de la ligne.
  • stroke-width: épaisseur de la ligne.

Voici quelques exemples supplémentaires :

  1. Ligne horizontale :
xml
<svg width="300" height="50">
  <line x1="50" y1="25" x2="250" y2="25" stroke="blue" stroke-width="5" />
</svg>
  1. Ligne verticale :
xml
<svg width="50" height="200">
  <line x1="25" y1="50" x2="25" y2="150" stroke="green" stroke-width="3" />
</svg>
  1. Ligne diagonale :
xml
<svg width="200" height="200">
  <line x1="20" y1="20" x2="180" y2="180" stroke="red" stroke-width="2" />
</svg>
  1. Ligne pointillée :
xml
<svg width="300" height="50">
  <line x1="50" y1="25" x2="250" y2="25" stroke="purple" stroke-width="2" stroke-dasharray="5,5" />
</svg>

Dans cet exemple, stroke-dasharray="5,5" crée une ligne avec des segments de 5 pixels pleins suivis de 5 pixels vides.

  1. Ligne avec flèche :
xml
<svg width="300" height="150">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="2" refY="5" orient="auto" markerUnits="userSpaceOnUse">
      <path d="M0,0 L0,10 L10,5 Z" fill="black" />
    </marker>
  </defs>
  <line x1="50" y1="75" x2="250" y2="75" stroke="orange" stroke-width="2" marker-end="url(#arrow)" />
</svg>

Dans cet exemple, une flèche est créée avec l'élément <marker> et utilisée comme marqueur de fin sur la ligne avec l'attribut marker-end.

N'hésitez pas à expérimenter avec ces exemples et à ajuster les valeurs selon vos besoins.

1 / 2