Når vi først har det, vi kalder vores "defs-blok" af SVG - det stykke SVG, der definerer alle de ting, vi vil tegne senere - hvor sætter vi det? Indtil videre har vi lagt det direkte i HTML, og det fungerer absolut. Hvis vi lader det være øverst på siden, skal du sige lige efter åbningskoden :
Det fungerer godt i alle browsere, der understøtter SVG.
Det kan være fristende at flytte dette ned. Måske er ikonerne ikke meget vigtige for siden, ikke så vigtige som det virkelige indhold, som de side skal levere, så vi flytter ikonerne til bunden af siden i stedet for at udsætte deres indlæsning som vi ofte gør med JavaScript. Vi prøver dette i videoen, men har problemer med Safari at gengive de ikoner, som vi senere prøvede overhovedet. For at være ærlig har jeg set inkonsekvent adfærd eller forskellige typer i andre browsere også gør det på denne måde, og det ser ud til, at landskabet skifter lidt i denne henseende. Så jeg har hørt: er en vanskelig ting at gennemføre. Det sikreste at placere blokken øverst, hvis du ender med at holde defs lige i dine dokumenter.
I denne video ser vi på nogle grundlæggende test af alt dette og ser derefter på nogle virkelige hjemmesider, der bruger dette system, og hvordan / hvor de indsætter svg defs-blokken.
Se pennen 954e71cb5d5e79fb61d3c89bb3f21b8a af Chris Coyier (@chriscoyier) på CodePen.
Bemærk
Jeg kan godt lide udtrykket “SVG defs block” - bare så vi kan kalde det noget, der har et specifikt formål, men ikke rigtig har et officielt navn. Men du behøver ikke altid rent faktisk bruge et tag. Når du bruger s, gengives de alligevel ikke alene, og jeg tror faktisk ikke, at de skal være indeni . Jeg har hørt definitioner af gradienter i SVG er de samme og fungerer ikke engang, hvis de er i . Uanset hvad er det stadig en "blok af SVG-kode, som vi bare definerer at bruge senere", så jeg vil sandsynligvis fortsætte med at kalde det en "SVG defs-blok."