Posizionamento di forme

Questo argomento descrive VML, una funzionalità deprecata a partire da Windows Internet Explorer 9. Le pagine Web e le applicazioni che si basano su VML devono essere migrate in SVG o in altri standard ampiamente supportati.

Nota

A partire da dicembre 2011, questo argomento è stato archiviato. Di conseguenza, non è più gestito attivamente. Per altre informazioni, vedere Contenuto archiviato. Per informazioni, raccomandazioni e indicazioni sulla versione corrente di Windows Internet Explorer, vedere Internet Explorer Developer Center.

 

Si è appreso come disegnare e colorare forme in una pagina Web usando VML. In questo argomento si userà VML per posizionare in modo preciso la grafica in una pagina Web.

VML usa la stessa sintassi definita nelle sezioni Box Model e Visual Rendering Model di CSS2 per posizionare le forme in una pagina Web. È possibile usare statici, relativi o assoluti per determinare dove si trova il punto di base in una pagina Web. È quindi possibile usare gli attributi dello stile superiore e sinistro per specificare l'offset dal punto di base in cui verrà posizionata la casella contenente per la forma.

È anche possibile usare z-index per specificare l'ordine z delle forme in una pagina Web.

Inoltre, VML fornisce rotazione e capovolgimento per ruotare o capovolgere forme.

In questo argomento

static

Lo stile di posizione predefinito è statico, che indica ai browser di posizionare la forma nel punto corrente (il punto di base) nel flusso di testo e ignorare le impostazioni negli attributi dello stile superiore e sinistro .

Ad esempio, nella rappresentazione VML seguente, l'ovale rosso viene posizionato immediatamente dopo il testo "Inizio della forma:", come illustrato nell'immagine seguente:

shape1-ps.gif (2123 bytes)

<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>

back to top Tornare all'inizio

relative

L'impostazione dell'attributo dello stile di posizione su "relativo" consente di posizionare la casella contenente con un offset dal punto corrente (il punto di base) nel flusso di testo. L'offset è determinato dalle impostazioni negli attributi di stile superiore e sinistro . Tenere presente che la casella contenente posizionata come relativo occupa spazio nel flusso di testo.

Ad esempio, nella rappresentazione VML seguente, l'ovale rosso è posizionato da 20 punti dalla sinistra e da 10 punti dall'alto rispetto al punto corrente nel flusso di testo, come illustrato nell'immagine seguente:

shape3.gif (2048 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>

back to top Tornare all'inizio

assoluto

L'impostazione dell'attributo dello stile di posizione su "assoluto" consente di posizionare la casella contenente una distanza esatta dall'angolo superiore sinistro (il punto di base) dell'elemento padre (l'elemento posizionato che contiene la forma). Tenere presente che la casella contenente posizionata come assoluto non occupa spazio nel flusso di testo.

Ad esempio, nella rappresentazione VML seguente, l'ovale rosso è contenuto all'interno <body> dell'elemento (l'intera pagina Web). Pertanto, il punto di base si trova nell'angolo superiore sinistro della pagina Web. La casella contenente per l'ovale è posizionata esattamente 20 punti dalla sinistra e da 10 punti dall'alto, rispetto all'angolo superiore sinistro della pagina Web, come illustrato nell'immagine seguente:

shape2.gif (2006 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>

back to top Tornare all'inizio

indice z

È possibile posizionare una forma che si sovrappone a un'altra forma. In genere, l'elemento grafico elencato ultimo nel codice HTML viene visualizzato in alto.

In VML è possibile controllare l'ordine z usando l'attributo di stile z-index . Il valore di questo attributo può essere zero, un intero positivo o un intero negativo. L'elemento grafico con un valore z-index più grande viene visualizzato nella parte superiore dell'elemento grafico con un valore z-index più piccolo. Quando entrambi i grafici hanno lo stesso valore di indice z, l'elemento grafico elencato ultimo nel codice HTML viene visualizzato in alto.

Nella rappresentazione VML seguente, ad esempio, l'ovale rosso viene visualizzato sopra il rettangolo blu. Questo perché il valore z-index dell'ovale rosso è maggiore del valore z-index del rettangolo blu.

shape4.gif (572 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index: 1'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt; z-index:0' fillcolor="blue" />

Se si modifica l'indice z, come illustrato nella rappresentazione VML seguente, l'ovale rosso si sposta dietro il rettangolo blu.

shape5.gif (469 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index:0'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt;z-index:1'
fillcolor="blue" />

Se si specifica un intero negativo, è possibile usare z-index per posizionare la grafica dietro il normale flusso di testo, come illustrato nella rappresentazione VML seguente.

shape6.gif (2125 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;z-index:-1;
width:80pt;height:90pt;' fillcolor="red" />
End.
</body>

back to top Tornare all'inizio

Rotazione

È possibile usare l'attributo dello stile di rotazione per specificare il numero di gradi che si desidera attivare una forma sull'asse. Un valore positivo indica una rotazione in senso orario; un valore negativo indica una rotazione antiorario.

Ad esempio, se si specifica style='... rotazione:90', è possibile ruotare la forma 90 gradi in senso orario.

back to top Tornare all'inizio

flip

È possibile usare l'attributo flip style per capovolgere una forma sull'asse x o y in base alla tabella seguente:

Valore Descrizione
x Capovolgi la forma ruotata sull'asse y (inverti le ordinate x)
y Capovolgi la forma ruotata sull'asse x (ordinate inverti y)

 

Sia x che y possono essere specificati nella proprietà flip.

Ad esempio, se si digita style='... flip:x y', si capovolgirà la forma sull'asse x e y.

back to top Tornare all'inizio

Riepilogo

In base a ciò che si è appreso, è possibile posizionare esattamente una forma in una pagina Web seguendo questa procedura:

  1. Decidere dove visualizzare la forma in una pagina Web e le dimensioni della forma.
  2. Specificare style='position:relativo (o relativo)' per determinare il punto di base.
  3. Usare sinistra e superiore per specificare l'offset dal punto di base.
  4. Utilizzare la larghezza e l'altezza per specificare le dimensioni della casella contenente per la forma.
  5. Usare z-index per specificare l'ordine z della forma.