- 5 Settembre 2008
- 260
- 0
- Miglior risposta
- 0
Firefox 3.5 ha introdotto il supporto per SVG usando come componente di stili CSS per applicare gli effetti SVG al contenuto HTML.
È possibile specificare in formato SVG negli stili sia all'interno dello stesso documento, o all'interno di un foglio di stile esterno.
Applicare l'SVG
Per applicare un effetto SVG utilizzando gli stili CSS, è necessario prima creare lo stile CSS che fa riferimento al SVG da applicare.
Nell'esempio precedente, il nuovo stile identificato da "stylename" è una maschera di SVG che fa riferimento il "localstyle" ID. Una volta che questo è stabilito,questa maschera sarà applicata ad eventuali elementi in questo stile CSS.
Sembra più complicato di quello che realmente è, diamo uno sguardo agli esempi per ottenere una buona idea di come funziona.
Ci sono tre stili che si possono applicare: si può utilizzare la maschera, clip-path, o filtro.
La Maschera
Ad esempio, è possibile stabilire uno stile CSS che fornisce una maschera sfumata per il contenuto HTML utilizzando il codice SVG simile al seguente nel documento HTML:
Si noti che nella prima linea, la maschera è specificato utilizzando un URL per l'ID "# m1", che è l'ID della maschera SVG specificato sotto di essa. Tutto il resto specifica i dettagli circa la stessa maschera di sfumatura.
In realtà l'applicazione dell'effetto SVG a XHTML o HTML si ottiene semplicemente assegnando lo stile target di cui sopra per l'elemento, in questo modo:
Questo esempio incorpora un iframe che contiene il sito web di Mozilla.org, che è reso con la maschera applicato.
Esempio:Clip
In questo esempio viene illustrato come utilizzare SVG per clip contenuto HTML
Questo sistema crea una zona di clipping composto da un cerchio e il rettangolo, e assegna a questi ultimi l'ID "# c1". Questo è fa quindi riferimento allo stile. Una volta che lo stile di destinazione viene stabilito in questo modo, il percorso clip può essere assegnato a qualsiasi elemento.
Si noti inoltre che è possibile apportare modifiche al formato SVG in tempo reale e vedere questi cambiamenti incidono immediatamente il rendering del codice HTML. Ad esempio, è possibile ridimensionare il cerchio del percorso stabilito clip di cui sopra:
Esempio:Filtri
Questo esempio mostra come poter applicare il filtro con svg ad un elemento html. Esso stabilisce diversi filtri, che sono applicati utilizzando gli stili a ciascuno dei tre elementi, sia negli Stati hover normale che mouse.
Si potrebbe anche applicare una matrice di colore, come questo:
Questi sono solo due dei cinque filtri dimostrati in questo esempio. Assicurarsi di dare un'occhiata al codice completo se si desidera vedere di più.
I cinque filtri vengono applicati utilizzando il seguente codice CSS:
Caricare un codice esterno
Ecco come caricare un codice esterno:
Tengo a sottolineare che questo è solo uno dei tanti usi di SVG, che è un linguaggio utile pratico e sorprendente. Io consiglierei a tutti di impararlo anche perché il futuro del web design è così:
SVG , CSS , HTML , Jquery , Ajax.
Spero di fare altre guide, a presto!
Fonte: Mozilla Developer Center;
Un commentino?
È possibile specificare in formato SVG negli stili sia all'interno dello stesso documento, o all'interno di un foglio di stile esterno.
Applicare l'SVG
Per applicare un effetto SVG utilizzando gli stili CSS, è necessario prima creare lo stile CSS che fa riferimento al SVG da applicare.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Nell'esempio precedente, il nuovo stile identificato da "stylename" è una maschera di SVG che fa riferimento il "localstyle" ID. Una volta che questo è stabilito,questa maschera sarà applicata ad eventuali elementi in questo stile CSS.
Sembra più complicato di quello che realmente è, diamo uno sguardo agli esempi per ottenere una buona idea di come funziona.
Ci sono tre stili che si possono applicare: si può utilizzare la maschera, clip-path, o filtro.
La Maschera
Ad esempio, è possibile stabilire uno stile CSS che fornisce una maschera sfumata per il contenuto HTML utilizzando il codice SVG simile al seguente nel documento HTML:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Si noti che nella prima linea, la maschera è specificato utilizzando un URL per l'ID "# m1", che è l'ID della maschera SVG specificato sotto di essa. Tutto il resto specifica i dettagli circa la stessa maschera di sfumatura.
In realtà l'applicazione dell'effetto SVG a XHTML o HTML si ottiene semplicemente assegnando lo stile target di cui sopra per l'elemento, in questo modo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Esempio:Clip
In questo esempio viene illustrato come utilizzare SVG per clip contenuto HTML
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Si noti inoltre che è possibile apportare modifiche al formato SVG in tempo reale e vedere questi cambiamenti incidono immediatamente il rendering del codice HTML. Ad esempio, è possibile ridimensionare il cerchio del percorso stabilito clip di cui sopra:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Questo esempio mostra come poter applicare il filtro con svg ad un elemento html. Esso stabilisce diversi filtri, che sono applicati utilizzando gli stili a ciascuno dei tre elementi, sia negli Stati hover normale che mouse.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
I cinque filtri vengono applicati utilizzando il seguente codice CSS:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Caricare un codice esterno
Ecco come caricare un codice esterno:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Tengo a sottolineare che questo è solo uno dei tanti usi di SVG, che è un linguaggio utile pratico e sorprendente. Io consiglierei a tutti di impararlo anche perché il futuro del web design è così:
SVG , CSS , HTML , Jquery , Ajax.
Spero di fare altre guide, a presto!
Fonte: Mozilla Developer Center;
Un commentino?
Ultima modifica: