SVG - Rect
L'élément <rect> est utilisé pour dessiner un rectangle aligné sur l'axe du système de coordonnées utilisateur actuel.
Déclaration
Voici la déclaration de syntaxe de <rect>élément. Nous n'avons montré que les principaux attributs.
<rect
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
rx="length"
ry="length"
style="style information"
class="style class" >
</rect>Les attributs
| Sr.No. | Nom et description |
|---|---|
| 1 | x- coordonnée en abscisse du coin supérieur gauche du rectangle. La valeur par défaut est 0. |
| 2 | y- coordonnée sur l'axe des y en haut à gauche du rectangle. La valeur par défaut est 0. |
| 3 | width - largeur du rectangle. |
| 4 | height - hauteur du rectangle. |
| 5 | rx - utilisé pour arrondir le coin du rectangle arrondi. |
| 6 | ry - utilisé pour arrondir le coin du rectangle arrondi. |
| sept | style - utilisé pour spécifier les styles en ligne. |
| 8 | class - utilisé pour spécifier le nom de style externe à l'élément. |
Exemple
testSVG.htm<html>
<title>SVG Rectangle</title>
<body>
<h1>Sample SVG Rectangle Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >
Rectangle #1: Without opacity.</text>
<rect x="100" y="30" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)"></rect>
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Rectangle avec opacité
<html>
<title>SVG Rectangle</title>
<body>
<h1>Sample SVG Rectangle Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >
Rectangle #2: With opacity </text>
<rect x="100" y="30" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);
stroke-opacity:0.5;opacity:0.5"> </rect>
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Rectangle n ° 3: avec coin arrondi
<html>
<title>SVG Rectangle</title>
<body>
<h1>Sample SVG Rectangle Image</h1>
<svg width="570" height="200">
<g>
<text x="0" y="15" fill="black" >
Rectangle #3: With Rounded Corner </text>
<rect x="100" y="100" rx="10" ry="10" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);"></rect>
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Impression