Werken met tekst in Scalable Vector Graphics (SVG)
In onze vorige berichten hebben we SVG gebruikt om vormen te maken. In deze post, zoals de titel al zei, zullen we kijken het maken van tekst met SVG. Er zijn veel dingen die we kunnen doen met tekst die verder gaat dan wat gewone HTML-tekst kan doen.
Dus laten we ze eens bekijken.
Basisimplementatie
Maar voordat we verder gaan, laten we eens kijken hoe Tekst in SVG wordt gevormd op het zeer basale niveau:
De tekst in SVG, zoals u kunt zien in het bovenstaande codefragment, is gedefinieerd met een voldoende logische tag, X en Y attributen om de basislijncoördinaten te specificeren.
Afbeeldingsbron: Wikipedia.org
En zo ziet de tekst eruit. Voor nu lijkt het erop dat het geen verschil heeft met normale tekst in HTML.
Basis tekststijlen
Tekst kan ook worden gestileerd met CSS-eigenschappen zoals lettertype dikte, lettertype, en text-decoration welke kan worden geïmplementeerd via inline-stijl, interne stijl of external-stijl zoals we in de vorige post hebben besproken SVG stylen met CSS. Hier zijn enkele voorbeelden.
Stoutmoedig
Dit is tekst in Scalable Vector Graphic (SVG)
Cursief
Dit is cursieve tekst in Scalable Vector Graphic (SVG)
Onderstrepen
Dit is onderstreepte tekst in Scalable Vector Graphic (SVG)
Element
In sommige gevallen, wanneer we alleen stijlen of attributen willen toepassen op een bepaald gedeelte van de tekst, kunnen we deze gebruiken
Dit is vetgedrukt ,dit is cursief endit is onderstreept
Schrijfmodus
Tekst is niet alleen geschreven van van links naar rechts. In andere delen van de wereld, bijvoorbeeld Japan, is de tekst geschreven boven naar beneden. In SVG kan dit worden gedaan met behulp van de schrijven-modus attribuut.
ぁ ぃ ぅ ぇ ぉ か き
In het bovenstaande voorbeeld hebben we verschillende willekeurige Japanse karakters geplaatst (vraag me niet wat ze betekenen, ik heb echt geen idee) en verander de oriëntatie met deze stijlverklaring, schrijfmodus: tb, waar tb staat voor boven naar beneden.
Tekstoverzicht
Tekst in SVG is in feite een afbeelding, dus we kunnen ook de beroerte attribuut om een randlijn aan de tekst toe te voegen, net als bij de andere vormen.
In het bovenstaande codefragment hebben we het beroerte toeschrijven aan de vullen attribuut aan geen wat zal resulteren in de volgende tekstpresentatie.
Tekstpad
In SVG kan de tekst niet alleen horizontaal en verticaal worden weergegeven, maar ook volg een padpatroon. Hier is hoe het te doen.
Eerst moeten we definiëren het pad. Het rechtstreeks creëren van een pad in HTML is echter niet zo intuïtief, we moeten coördinaten en sommige opdrachten begrijpen waarvan ik weet zeker dat de meesten van ons zullen proberen te vermijden. Dus om deze stap eenvoudiger te maken, stel ik persoonlijk voor om een vectoreditor (Inkscape of Illustrator) te openen, een pad te maken en de SVG-code te genereren.
Zet dan de defs hier betekent definitie.
Merk op dat we ook een hebben toegevoegd ID kaart toeschrijven aan de ID kaart naar onze tekst met
Lorem ipsum dolor sit amet consectetur.
Verder lezen: SVG-paden
Tekstverloop
Het toevoegen van een achtergrond om de tekst te vullen is ook mogelijk in SVG, en als het je gelukt is in het gedeelte Tekstpad hierboven, zou dit veel eenvoudiger zijn.
Eerst moeten we de verloopkleuren definiëren.
Wanneer alle noodzakelijke definities zijn ingesteld, hoeven we nu alleen de tekst toe te voegen en de vullen attribuut aan het verloop ID kaart attribuut, als volgt;
helling
En hier is het, de tekst met verloop.
Verder lezen: SVG-verloop en patroon
Verdere referenties
Tekst in SVG is ongetwijfeld krachtig, er zijn feitelijk veel dingen die we kunnen doen buiten datgene waar we in deze post aan kunnen voldoen. Dus hieronder hebben we nog enkele referenties samengesteld om je interesse in dit onderwerp te dienen.
- Over lettertypen in SVG - Divya Manian
- SVG-tekst Officiële documentatie - W3.org
- SVG Dovumentation bij Mozilla Dev. Netwerk met voorbeelden en hulpmiddelen - MDN
- Kenmerk SVG-schrijfmodus - MDN
- Demo bekijken
- Download de bron
