Easy-Micro


LANGAGE SVG Inline
Rectangle 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 :-)


<svg height="110px" width="110px">
<rect id="myRect" height="100px" width="100px" fill="red"/>
</svg>
Source: David Rousset

Un rectangle SVG avec du texte

SVG Désolé, votre navigateur ne support pas le SVG.

<svg height="120" width="120">
<rect id="myRect" 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.

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



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mardi 22 janvier 2019 - Semaine 04 - Saint Vincent (Demain: Saint Barnard)
Aujourd'hui, c'est l'anniversaire de Frank Leboeuf (1968-51 ans), footballeur français (défenseur). Autre 22 janvier: 1981 - Début de la série américaine Dallas sur les écrans français (TF1).
Haut de page Easy-Micro