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 25 juin 2019 - Semaine 26 - Saint Prosper (Demain: Saint Anthelme)
Aujourd'hui, c'est l'anniversaire de George Michael (1963-56 ans), auteur-compositeur-interprète anglais. Autre 25 juin: 1991 - La Croatie et la Slovénie proclament lеur indépendance de la Yοugoslavie.
Haut de page Easy-Micro