SVG InlineRectangle SVG
Déssiner un simple rectangle en SVG
Pour déssiner un simple rectangle en SVG, on utilise une balise <svg> qui permet de définir un conteneur et, à l'intèrieur, une balise <rect> qui accepte les attributs width (largeur) et height (hauteur), un identifiant unique (id) et une couleur de remplissage (fill).
Faites en sorte que la taille du conteneur (svg) soit plus grande que celle du contenu - le rectangle :-)
Faites en sorte que la taille du conteneur (svg) soit plus grande que celle du contenu - le rectangle :-)
<svg height="110px" width="110px">
<rect id="myRect" height="100px" width="100px" fill="red">
</svg>
Source: David Rousset</svg>
Un rectangle SVG avec du texte
<svg height="120" width="120">
<rect id="myRect2" height="70" width="120" fill="green"/>
<text fill="#ffffff" font-size="45" font-family="Verdana" x="10" y="50">SVG</text>
Désolé, votre navigateur ne support pas le SVG.</svg>
Vous noterez que le texte est sélectionnable.<rect id="myRect2" height="70" width="120" fill="green"/>
<text fill="#ffffff" font-size="45" font-family="Verdana" x="10" y="50">SVG</text>
Désolé, votre navigateur ne support pas le SVG.</svg>
Coins arrondis
Pour aller plus loin, vous pouvez rajouter les attributs rx="20" ry="20" à la balise SVG rect afin d'avoir des coins arrondis.Bordures
Vous pouvez aussi rajouter une bordure à la balise rect (ou svg) comme ceci :style="fill:red;stroke:black;stroke-width:5;opacity:0.5"
pour aller plus loin...
- Voir un exemple de rectangle SVG chez w3schools
