Tekstin käsitteleminen skaalautuvassa vektorigrafiikassa (SVG)
Edellisissä viestissämme olemme käyttäneet SVG: tä luomaan muotoja. Tässä virassa, kuten otsikko sanoi, tarkastelemme tekstin luominen SVG: llä. Meillä on paljon asioita, joita voimme tehdä tekstin kanssa, mitä pelkkä HTML-teksti pystyy tekemään.
Joten, tarkistetaan ne.
Perusrakentaminen
Mutta ennen kuin menemme pidemmälle, katsotaanpa miten Teksti SVG: ssä muodostuu sen perustasolla:
SVG: ssä oleva teksti, kuten edellä olevasta koodinpätkästä näkyy, määritellään riittävän loogisella tunnisteella, x ja y määritteitä määrittelemään perustason koordinaatit.
Kuvan lähde: Wikipedia.org
Ja tässä on teksti näyttää. Tällä hetkellä näyttää siltä, ettei HTML: n tavallisella tekstillä ole eroa.
Perustekstiilit
Teksti voidaan myös muotoilla CSS-ominaisuuksilla, kuten fontti-paino, fonttityyli, ja text-decoration jotka voidaan toteuttaa joko kautta inline-tyylinen, sisäinen tyyli tai ulkoinen tyyliä kuten olemme keskustelleet edellisessä postissa SVG: n muotoilu CSS: llä. Tässä muutamia esimerkkejä.
rohkea
Tämä on skaalautuvan vektorigrafiikan (SVG) teksti
kursivoitu
Tämä on kursivoitu teksti skaalautuvassa vektorigrafiikassa (SVG)
Korostaa
Tämä on alleviivattu teksti skaalautuvassa vektorigrafiikassa (SVG)
elementti
Joissakin tapauksissa, kun haluamme vain soveltaa tyylejä tai attribuutteja tekstin tiettyyn osaan, voimme käyttää
Tämä on rohkea ,tämä on kursivoitu jatämä on alleviivattu
Kirjoitustila
Tekstiä ei vain kirjoiteta vasemmalta oikealle. Esimerkiksi muualla maailmassa, esimerkiksi Japanissa, teksti on kirjoitettu ylhäältä alas. SVG: ssä tämä voidaan tehdä käyttämällä kirjoittaminen-mode ominaisuus.
ぁ ぃ ぅ ぇ ぉ か き
Yllä olevassa esimerkissä olemme asettaneet useita satunnaisia japanilaisia merkkejä (älä kysy minulta niiden merkitystä, minulla ei ole aavistustakaan) ja muuta suuntaa tämän tyyliilmoituksen avulla, kirjoitustila: tb, missä tB seisoo ylhäältä alas.
Tekstin ääriviivat
SVG: n teksti on pohjimmiltaan graafinen, joten voimme myös soveltaa tahti attribuutti lisätä rajalinjan tekstiin aivan kuten muissa muodoissa.
Yllä olevassa koodinpätkössä olemme lisänneet tahti omistaa täyttää määrite ei mitään joka johtaa seuraavaan tekstin esitykseen.
Tekstin polku
SVG: ssä tekstiä ei voi näyttää vain vaaka- ja pystysuunnassa, vaan se voi myös olla noudata polun mallia. Tässä on, miten se tehdään.
Ensinnäkin meidän on määriteltävä polku. Reitin luominen suoraan HTML-koodiin ei kuitenkaan ole niin intuitiivinen, että meidän on ymmärrettävä koordinaatit ja jotkin komennot, joista olen varma, että useimmat meistä yrittävät välttää. Niinpä, jotta tämä vaihe olisi yksinkertaisempi, ehdotan henkilökohtaisesti, että avoin vain vektorieditorin (Inkscape tai Illustrator), luodaan polku ja luodaan SVG-koodi.
Laita sitten defs tässä tarkoittaa määritelmää.
Huomaa, että olemme lisänneet myös id omistaa id tekstisi kanssa
Lorem ipsum dolor sit amet consectetur.
Lue lisää: SVG-polut
Teksti Gradient
Taustan lisääminen tekstin täyttämiseen on myös mahdollista SVG: ssä, ja jos olet onnistunut Teksti-polku -osiossa, tämä olisi paljon helpompaa.
Ensinnäkin meidän on määriteltävä gradienttivärit.
Kun kaikki tarvittavat määritelmät on määritetty, nyt on vain lisättävä teksti ja viitattava täyttää attribuutti kaltevuuteen id määrite, seuraavasti;
Kaltevuus
Ja tässä on teksti, jossa on kaltevuus.
Lue lisää: SVG-kaltevuus ja kuvio
Lisää viitteitä
SVG: ssä oleva teksti on epäilemättä voimakas, on todella paljon asioita, joita voimme tehdä pidemmälle kuin voimme täyttää tässä viestissä. Joten alla olemme koonneet muutamia viitteitä palvelemaan kiinnostusta tähän aiheeseen.
- Tietoja fonteista SVG: ssä - Divya Manian
- SVG-tekstin virallinen dokumentaatio - W3.org
- SVG Dovumentation Mozilla Devissä. Verkko, jossa on esimerkkejä ja työkaluja - MDN
- SVG-kirjoitusmuodon määrite - MDN
- Näytä demo
- Lataa lähde
