Accueil    Codes    svg - rectangle
 



Html5 SVG - element rect  Html5 SVG - element rect



Création d'éléments SVG de type rect



L'élément rect permet de dessiner un rectangle à angles droits ou arrondis. Il se base sur un point de départ, l'angle supérieur gache, une largeur et une hauteur :
    - x : Coordonnée sur l'axe X de l'angle supérieur gauche du rectangle
    - y : Coordonnée sur l'axe Y de l'angle supérieur gauche du rectangle
    - width : Largeur du rectangle
    - height : Hauteur du rectangle
    - rx : Coordonnée sur l'axe X du centre de l'ellipse pour les angles arrondis
    - ry : Coordonnée sur l'axe Y du centre de l'ellipse pour les angles arrondis


Exemple SVG - Rectangle



<svg width="600" height="200" viewBox="0 0 600 200" zoomAndPan="disable"
   xmlns="http://www.w3.org/2000/svg">
   <desc>Exemple SVG - Rectangle</desc>

   <rect x="10" y="50" width="150" height="100" fill="midnightblue" />
   <rect x="200" y="50" width="150" height="100" rx="10" stroke-width="5" stroke="black" fill="lightsteelblue" />
   <g transform="rotate(-30)">
      <rect x="320" y="270" width="150" height="100" rx="20" fill="none" stroke="gray" stroke-width="5" />
   </g>
</svg>