SVG rettangolo
SVG forme
SVG ha alcuni elementi di forma predefinita, può essere utilizzato dagli sviluppatori da usare e gestire:
- Rettangolo <rect>
- Turno <circle>
- Ovale <ellisse>
- Linea <line>
- Polilinea <poligonale>
- Poligono <polygon>
- Percorso <percorso>
Le sezioni che seguono spiegano a voi questi elementi, a partire da un elemento rettangolare.
SVG rettangolo - <rect>
esempio 1
tag <Rect> viene utilizzato per creare un rettangolo, e una variante rettangolare:
Ecco il codice SVG:
Esempi
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
analisi del codice:
- larghezza ed altezza attributi elementi rect definiscono l'altezza e la larghezza del rettangolo
- proprietà di stile viene utilizzata per definire le proprietà CSS
- proprietà di riempimento CSS definisce il rettangolo di colore di riempimento (valori RGB, nome del colore o il valore esadecimale)
- Larghezza di proprietà di tratto di larghezza CSS definisce il bordo rettangolare
- La proprietà colore del tratto CSS definisce il bordo rettangolare
esempio 2
Diamo un'occhiata a un altro esempio, contiene una serie di nuove caratteristiche:
Ecco il codice SVG:
Esempi
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9"/>
</svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
analisi del codice:
- attributo X definisce la posizione sinistra del rettangolo (ad esempio, x = "0" per definire il rettangolo sul lato sinistro della finestra del browser, la distanza è 0px)
- Top attributo posizione y definisce il rettangolo (ad esempio, y = "0" dalla definizione del rettangolo all'inizio della finestra del browser è 0px)
- proprietà Fill-opacità di CSS definisce la trasparenza del colore di riempimento (campo legale: 0--1)
- La proprietà CSS corsa-opacità definisce la trasparenza del colore del tratto (campo legale: 0--1)
esempio 3
Definire l'opacità dell'intero elemento:
Ecco il codice SVG:
Esempi
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
- proprietà CSS opacità definisce il valore dell'elemento trasparente (range: 0-1).
esempio 4
L'ultimo esempio, creare un rettangolo arrotondato:
Ecco il codice SVG:
Esempi
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
- RX e Ry attributi possono generare rettangolo arrotondato.