Arbeta med text i skalbar vektorgrafik (SVG)

I våra tidigare inlägg har vi använt SVG för att skapa former. I det här inlägget, som titeln sa, kommer vi att undersöka skapa text med SVG. Det finns många saker vi kan göra med text utöver vad vanlig HTML-text kan göra.

Så, låt oss kolla in dem.

Grundläggande genomförande

Men innan vi går längre, låt oss se hur Text i SVG är bildad på sin grundläggande nivå:

Texten i SVG, som du kan se från ovanstående kodbit, definieras med en tillräckligt logisk tagg, . Detta element kräver i grunden bara x och y attribut att ange baslinjekoordinaterna.

Bildkälla: Wikipedia.org

Och här är hur texten kommer att se ut. För tillfället verkar det inte ha någon skillnad med vanlig text i HTML.

Grundläggande textstilar

Text kan också utformas med CSS-egenskaper som font-weight, typsnitt, och text-decoration som kan genomföras antingen genom inline-stil, intern stil eller yttre stil som vi har diskuterat i föregående inlägg om Styling SVG med CSS. Här är några av exemplen.

Djärv

 Detta är text i skalbar vektorgrafik (SVG) 

Kursiv

 Detta är kursiv text i skalbar vektorgrafik (SVG) 

Understrykning

 Detta är understruken text i skalbar vektorgrafik (SVG) 

Element

I vissa fall, när vi bara vill tillämpa stilar eller attribut på en viss del av texten, kan vi använda . I det här exemplet nedan visas hur vi lägger till djärv, kursiv och Understrykning till en enda textrad.

 Detta är fet, Detta är kursiv och Detta understryker 

Skrivläge

Text skrivs inte bara från vänster till höger. I andra delar av världen, exempelvis Japan, skrivs texten från topp till tå. I SVG kan detta göras genom att använda skrivläge attribut.

 ぁ ぃ ぅ ぇ ぉ か き  

I exemplet ovan har vi satt flera slumpmässiga japanska tecken (fråga mig inte vad de menar, jag har ingen aning) och ändra orienteringen med denna stildeklaration, skrivläge: tb, var tb står för topp till tå.

Text skiss

Text i SVG är i princip en grafik, så vi kan också tillämpa stroke attribut att lägga till en gränslinje till texten precis som vi gjorde med de andra formerna.

I ovanstående kodsedel har vi lagt till stroke attribut till element och ta bort textfärgen genom att ange fylla tillskriva ingen vilket kommer att resultera i följande textpresentation.

Textvägen

I SVG kan texten inte bara visas horisontellt och vertikalt, men det kan också följ ett banmönster. Så här gör du det.

Först måste vi definiera vägen. Att skapa en sökväg direkt i HTML är dock inte så intuitiv, vi behöver förstå koordinater och vissa kommandon som jag är säker på att de flesta av oss kommer att försöka undvika. Så för att göra det här steget enklare föreslår jag personligen att bara öppna en vektorredigerare (Inkscape eller Illustrator), skapa en sökväg och generera SVG-koden.

Sätt sedan element inuti a element. defs här betyder definition.

Observera att vi också har lagt till en id attribut till . Nu behöver vi bara länka vägen id till vår text med element, som så;

    Det här är en av de bästa sevärdheterna.   

Vidare läsning: SVG-banor

Text Gradient

Lägga till en bakgrund för att fylla texten är också möjlig i SVG, och om du har lyckats i avsnittet Textväg ovan skulle det vara mycket lättare.

Först måste vi definiera gradientfärgerna.

När alla nödvändiga definitioner är uppställda, behöver vi bara lägga till texten och hänvisa till fylla attribut till gradientens id attribut, enligt följande;

 Lutning 

Och här är det texten med gradient.

Vidare läsning: SVG Gradient och Pattern

Ytterligare referenser

Text i SVG är utan tvekan kraftfull, det finns faktiskt många saker vi kan göra utöver vad vi kan passa i det här inlägget. Så, nedan har vi sammanställt några fler referenser för att tjäna ditt intresse för detta ämne.

• Om typsnitt i SVG - Divya Manian
• SVG Text Officiell dokumentation - W3.org
• SVG Dovumentation på Mozilla Dev. Nätverk med exempel och verktyg - MDN
• SVG Skrivningsläge Attribut - MDN

• Visa demo
• Hämta källa