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 ]
Lundi 25 mars 2019 - Semaine 13 - Saint Humbert (Demain: Sainte Larissa)
Aujourd'hui, c'est l'anniversaire de Marcia Cross (1962-57 ans), comédienne américaine (rôle de Bree Van de Kamp dans Desperate Housewives). Autre 25 mars: 1918 : décès à Paris du compositeur français Claude Debussy. 1984 : Alain Prost gagne le grand prix de Formule 1 du Brésil.
Haut de page Easy-Micro