Skaalattavan vektorigrafiikan (SVG) muotoilu CSS n avulla

Tänään jatkamme keskustelua skaalautuvasta vektorigrafiikasta (SVG), ja kuten olemme huomauttaneet edellisessä postissa, yksi SVG: n käytön eduista on, että se voidaan muotoilla CSS: llä.

SVG-muotoiluominaisuudet

SVG: n muotoilu toimii pohjimmiltaan samalla tavalla kuin tavallisissa HTML-elementeissä. On kuitenkin muitakin ominaisuuksia, jotka on tarkoitettu nimenomaan SVG-objektille, joilla on oma spesifikaatio CSS: n lisäksi.

Esimerkiksi, tavallisessa HTML-elementissä voimme lisätä taustavärin joko taustaväri tai tausta CSS-ominaisuus. SVG: ssä se on hieman erilainen; taustaväri on määritetty täyttää sijasta. Myös elementin raja on määritetty tahti omaisuutta ja ei ole reunus kuten tavallisessa HTML-muodossa, näet täydellisen luettelon täältä.

Jos olet työskennellyt vektorieditorin, kuten Adobe Illustratorin kanssa, melko pitkä, voit arvata nopeasti, että SVG: n ominaisuuden nimeämismekanismi on peräisin editorilta.

SVG-tyylin toteutus

Voimme käyttää jotakin seuraavista tavoista tyyliä SVG-elementti;

Esityksen ominaisuudet

Jos olet nähnyt kaikki SVG-ominaisuuksien luettelon, ne kaikki voidaan lisätä suoraan elementtiin elementin esityksen muuttamiseksi. Seuraava esimerkki näyttää, miten voimme lisätä täyttää ja tahti omaisuutta suoraan a rect elementti;

Suorakulmio osoittautuu alla olevan kuvan kaltaiseksi;

Sisällysluettelo

Voimme myös lisätä tyyliä tyyli ominaisuus. Seuraavassa esimerkissä lisätään myös täyttää ja tahti että rect, mutta tällä kertaa lisäämme sen tyyli ja käännä sitä CSS3: lla muuttaa omaisuutta, kuten näin;.

Suorakulmio kääntyy samaan tulokseen, vain, että se on nyt myös pyöritetty;

Sisäinen tyylisivu

Upota SVG-tyyli tyyli elementti on myös mahdollista, eikä se eroa siitä, miten teimme sen tavallisella HTML-koodilla. Alla oleva esimerkki näyttää, miten sisäiset tyylit lisätään SVG-elementteihin .html asiakirja.

SVG on kuitenkin XML-pohjainen kieli, joten kun aiomme lisätä inline-tyylisivua a .svg meidän on asetettava tyylitieto cdata, seuraavasti;

cdata tässä tarvitaan, koska CSS voi olla > merkki, joka on ristiriidassa XML-jäsenten kanssa. käyttämällä cdata on suositeltavaa upottaa tyyli SVG: hen, vaikka ristiriitainen merkki ei ole tyylisivuilla.

Ulkoinen tyylisivu

Ulkoinen tyylisivu soveltuu myös samalla tavalla SVG-elementteihin .html asiakirja.

Jälleen .svg asiakirjasta, meidän on lähetettävä ulkoinen tyylisivu xml-stylesheet, niin kuin.

Ryhmittele elementtejä

SVG-elementit voidaan ryhmitellä elementti. Ryhmittelyelementtien avulla voimme jakaa yhteisiä tyylejä kaikkiin ryhmän elementteihin, tässä on esimerkki;

Sekä suorakulmion että ympyrän tulos on sama.

Lopullinen ajatus

Olemme kulkeneet läpi kaikki olennaiset asiat, jotka liittyvät SVG: n muotoiluun CSS: llä, ja tämä on vain yksi graafisen SVG: n tarjoamisen eduista. Seuraavassa postissa tarkastelemme vielä toista, joten pysy kuulolla.

• Näytä demo
• Lataa lähde