Styling Scalable Vector Graphic (SVG) con CSS
Oggi continueremo la nostra discussione su Scalable Vector Graphic (SVG), e come abbiamo sottolineato nel nostro post precedente, uno dei vantaggi dell'utilizzo di SVG è che può essere abbinato a CSS.
Proprietà Styling SVG
Lo stile SVG funziona fondamentalmente nello stesso modo degli elementi HTML normali, infatti hanno condiviso anche alcune proprietà comuni. Tuttavia, ci sono altre proprietà che sono specificatamente pensate per l'oggetto SVG che hanno le loro specifiche oltre al CSS.
Per esempio, nell'elemento HTML normale, possiamo aggiungere il colore di sfondo con colore di sfondo o sfondo Proprietà CSS. In SVG, è un po 'diverso; il colore dello sfondo è specificato con riempire proprietà invece. Inoltre, il bordo dell'elemento è specificato con ictus proprietà e non è con il confine come abbiamo fatto con l'HTML normale, puoi vedere l'elenco completo qui.
Se hai lavorato abbastanza a lungo con l'editor vettoriale come Adobe Illustrator, puoi indovinare rapidamente che il meccanismo di denominazione delle proprietà in SVG è stato generato dall'editor.
Implementazione in stile SVG
Possiamo usare uno dei seguenti modi per disegnare l'elemento SVG;
Attributi di presentazione
Se hai visto tutte le proprietà SVG, tutte possono essere aggiunte direttamente sull'elemento per alterare la presentazione dell'elemento. L'esempio seguente mostra come possiamo aggiungere riempire e ictus proprietà direttamente su a rect elemento;
Il rettangolo sarà simile allo screenshot qui sotto;
Foglio di stile in linea
Possiamo anche aggiungere lo stile con il stile attributo. Nel seguente esempio aggiungeremo anche riempire e ictus al rect, ma questa volta lo aggiungiamo nel stile e ruotalo con CSS3 trasformare proprietà, così;.
Il rettangolo girerà nello stesso risultato, solo che ora è anche ruotato;
Foglio di stile interno
Incorpora lo stile SVG all'interno di stile l'elemento è anche possibile e non è diverso da come l'abbiamo fatto su un normale HTML. Questo esempio mostra come aggiungere stili interni per influenzare gli elementi SVG in .html documento.
Tuttavia, SVG è un linguaggio basato su XML, quindi quando stiamo per aggiungere un foglio di stile in linea in a .svg documento, dobbiamo inserire la dichiarazione degli stili all'interno cdata, come segue;
Il cdata qui è richiesto, dato che i CSS possono avere > personaggio che entrerà in conflitto con i parser XML. utilizzando cdata è altamente raccomandato per incorporare lo stile in SVG, anche se il carattere in conflitto non è indicato nel foglio di stile.
Foglio di stile esterno
Anche il foglio di stile esterno funziona allo stesso modo per gli elementi SVG in .html documento.
Di nuovo in .svg documento, dobbiamo fare riferimento al foglio di stile esterno come a xml-stylesheet, così.
Raggruppamento di elementi
Gli elementi SVG possono essere raggruppati con
Sia il rettangolo che il cerchio avranno lo stesso risultato.
Pensiero finale
Abbiamo esaminato tutte le questioni essenziali sullo stile SVG con CSS e questo è solo uno dei vantaggi del servizio grafico con SVG. Nel prossimo post daremo un'occhiata a un altro ancora, quindi rimanete sintonizzati.
- Visualizza la demo
- Scarica fonte
