Darbas su tekstu keičiamo vektoriaus grafikoje (SVG)
Ankstesniuose pranešimuose SVG sukūrėme formas. Šiame pranešime, kaip sakė pavadinimas, mes ieškosime sukurti tekstą su SVG. Yra daug dalykų, kuriuos galime padaryti su tekstu, viršijantį paprastą HTML tekstą.
Taigi, patikrinkime juos.
Pagrindinis įgyvendinimas
Tačiau prieš eidami toliau, pažiūrėkime, kaip Tekstas SVG yra suformuotas pačiame pagrindiniame lygyje:
SVG tekstas, kaip matote iš pirmiau pateikto kodo fragmento, yra apibrėžtas pakankamai logišku žyma, x ir y atributai, kad būtų galima nustatyti bazines koordinates.
Vaizdo šaltinis: Wikipedia.org
Ir štai kaip atrodys tekstas. Dabar atrodo, kad jis neturi skirtumo su įprastu tekstu HTML.
Pagrindiniai teksto stiliai
Tekstas taip pat gali būti suformuotas su CSS savybėmis, pvz šrifto svoris, Šrifto stilius, ir teksto apdaila kurios gali būti įgyvendinamos arba per inline stilius, vidinis stilius arba išorinis stilius kaip mes kalbėjome apie ankstesnį pranešimą SVG formavimas su CSS. Štai keletas pavyzdžių.
Bold
Tai tekstas skaliuojamame vektoriniame grafike (SVG)
Italic
Tai kursyvinis tekstas skaliuojamame vektoriniame grafike (SVG)
Pabraukimas
Tai yra pabrauktas tekstas „Scalable Vector Graphic“ (SVG)
Elementas
Kai kuriais atvejais, kai tik norime taikyti stilius ar atributus tam tikrai teksto daliai, galime naudoti
Tai drąsus ,tai yra kursyvas irtai pabrėžiama
Rašymo režimas
Tekstas yra ne tik parašytas iš kairės į dešinę. Kitose pasaulio dalyse, pavyzdžiui, Japonijoje, tekstas parašytas Nuo viršaus iki apačios. SVG galima tai padaryti naudojant rašymo režimas atributas.
ぁ ぃ ぅ ぇ ぉ か き
Pirmiau pateiktame pavyzdyje mes įdėjome keletą atsitiktinių japonų rašmenų (neklauskite jų reikšmės, aš tikrai neturiu idėjos) ir pakeiskite orientaciją su šia stiliaus deklaracija, rašymo režimas: tb, kur tb stovi Nuo viršaus iki apačios.
Teksto kontūras
SVG tekstas iš esmės yra grafinis, taip pat galime taikyti insultas atributas pridėti sienos liniją prie teksto, lygiai taip pat, kaip ir su kitomis figūromis.
Pirmiau pateiktame kodo fragmente pridėjome insultas atributas užpildyti priskirti nė vienas kuris bus pateiktas po teksto pateikimo.
Teksto kelias
SVG „Tekstas“ gali būti rodomas ne tik horizontaliai ir vertikaliai, bet taip pat sekite kelio modelį. Štai kaip tai padaryti.
Pirma, turime apibrėžti kelias. Tačiau tiesiai į HTML įvedimo kelias nėra toks intuityvus, kad turime suprasti koordinates ir kai kurias komandas, kurias tikiu, kad dauguma iš mūsų stengsis išvengti. Taigi, kad šis žingsnis būtų paprastesnis, aš asmeniškai siūlau tiesiog atverti vektoriaus redaktorių („Inkscape“ arba „Illustrator“), sukurti kelią ir generuoti SVG kodą.
Tada padėkite defs čia reiškia apibrėžimą.
Atkreipkite dėmesį, kad taip pat pridėjome ID atributas ID prie mūsų teksto
Lorem ipsum dolor sit amet consectetur.
Papildoma literatūra: SVG keliai
Teksto gradientas
SVG gali būti pridėta fono, kad užpildytumėte tekstą, ir jei jums pavyko pasiekti teksto kelio skyrių, tai būtų daug lengviau.
Pirma, turime apibrėžti gradiento spalvas.
Kai nustatomos visos būtinos apibrėžtys, dabar turime tik pridėti tekstą ir kreiptis į užpildyti gradiento atributas ID atributas, taip;
Gradientas
Ir čia tai yra, tekstas su gradientu.
Papildoma literatūra: SVG gradientas ir modelis
Kitos nuorodos
SVG tekstas neabejotinai yra galingas, iš tikrųjų yra daug dalykų, kuriuos mes galime padaryti daugiau nei tai, ką galime pritaikyti šiame pranešime. Taigi toliau pateikiame dar keletą nuorodų, kad galėtumėme domėtis šiuo klausimu.
- Apie šriftus SVG - „Divya Manian“
- SVG teksto oficiali dokumentacija - W3.org
- SVG dokumentacija Mozilla Dev. Tinklas su pavyzdžiais ir įrankiais - MDN
- SVG rašymo režimo atributas - MDN
- Peržiūrėti demonstraciją
- Atsisiųsti šaltinį
