SVG - Rect
L'elemento <rect> viene utilizzato per disegnare un rettangolo allineato all'asse con il sistema di coordinate dell'utente corrente.
Dichiarazione
Di seguito è riportata la dichiarazione della sintassi di <rect>elemento. Abbiamo mostrato solo gli attributi principali.
<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>Attributi
| Sr.No. | Nome e descrizione |
|---|---|
| 1 | x- Coordinata dell'asse x dell'angolo superiore sinistro del rettangolo. L'impostazione predefinita è 0. |
| 2 | y- Coordinata dell'asse y della parte superiore sinistra del rettangolo. L'impostazione predefinita è 0. |
| 3 | width - larghezza del rettangolo. |
| 4 | height - altezza del rettangolo. |
| 5 | rx - utilizzato per arrotondare l'angolo del rettangolo arrotondato. |
| 6 | ry - utilizzato per arrotondare l'angolo del rettangolo arrotondato. |
| 7 | style - utilizzato per specificare gli stili in linea. |
| 8 | class - utilizzato per specificare il nome dello stile esterno per l'elemento. |
Esempio
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>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Rettangolo con 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>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Rettangolo n. 3: con angolo arrotondato
<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>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Stampa