Kraften i CSS hjælper dig med at tage form, SVG! Brug af SVG som objekt. Hvad bruges SVG til?

Fortsættelse af forrige artikel " SVG styling Med ved hjælp af CSS- Del 1” dedikeret til formatet vektorgrafik SVG.

Styling med CSS

Der er et klart og tydeligt forhold mellem HTML- og CSS-sprogene: HTML sprog skabt til indholdsstrukturering På siden; opgave CSS sprog- eksternt design af dette indhold. SVG-formatet udvisker de klare grænser for dette forhold. For eksempel behøver formatversion SVG1.1 ikke CSS til styling individuelle elementer SVG objekter - til dette formål er der såkaldte præsentationsegenskaber .

Præsentationsattributter er en forkortelse for CSS-egenskaber for SVG-elementer. Du kan tænke på disse attributter som CSS-egenskaber for SVG med en speciel syntaks. Style cascading gælder for disse egenskaber, men i denne artikel vil vi gøre det på en mere kortfattet måde.

Eksemplet nedenfor er kode, der bruger præsentationsegenskaber at style grænsen

polygon i form af en femtakket stjerne:

I dette eksempel er attributterne

1

fylde

, eller , er helt forskellige fra deres CSS-modstykker.

SVG2-formatet har flere præsentationsegenskaber, såsom

1

x

,

1

y

,

1

bredde

,

1

højde

,

1

cx

,

1

cy

og nogle andre, der ikke kan specificeres ved hjælp af CSS i SVG1.1. En liste over nye SVG-attributter kan findes på dette link - SVG2-specifikation.

En anden måde at style SVG-elementer på er at bruge CSS-egenskaber til dette formål. Ligesom med HTML-elementer kan CSS-egenskaber indstilles ved hjælp af en inline-stil:

"279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 " />

SVG stil kaskader

Som tidligere nævnt, præsentationsegenskaber er en speciel type ejendom, og at de blot er en forkortelse for CSS-egenskaber, der gælder for SVG-elementer. Baseret på ovenstående er det logisk at antage, at konceptet med præsentations-SVG-attributter, ligesom CSS-egenskaber, er anvendeligt kaskade af stilarter.

Præsentationsattributter er placeret som "forfatterstilregler" og kan tilsidesættes af alle andre definitioner: eksterne typografiark, interne typografiark eller indlejrede typografier.

Diagrammet nedenfor viser rækkefølgen af ​​stilarter i en stilkaskade. Jo lavere stilarterne er placeret i denne tabel, er stort beløb af overliggende stilarter kan de overskrives. I vores tilfælde kan præsentationsstile tilsidesættes af næsten alle andre stilarter, undtagen brugeragent-stile:

For eksempel er kodeeksemplet nedenfor en cirkel skrevet i SVG. Cirkelfyldfarve som en attribut

ved at bruge reglen , og .

Noter

Da præsentationsattributter har XML-syntaks, er de case-sensitive. For eksempel, når du indstiller fyldfarven for et SVG-element, skal attributten skrives som

V ,

1