Práce s textem v škálovatelné vektorové grafice (SVG)

V našich předchozích příspěvcích jsme použili SVG k vytvoření tvarů. V tomto příspěvku, jak název napovídal, se budeme zabývat vytváření textu pomocí SVG. Existuje spousta věcí, které můžeme dělat s textem nad rámec toho, co dokáže prostý text HTML.

Podívejme se na ně.

Základní implementace

Než půjdeme dále, podívejme se, jak Text v SVG na své základní úrovni:

Text v SVG, jak můžete vidět z výše uvedeného fragmentu kódu, je definován dostatečně logickou značkou, . Tento prvek v podstatě vyžaduje pouze X a y pro určení souřadnic základní čáry.

Zdroj obrázku: Wikipedia.org

A zde je, jak bude text vypadat. Prozatím se zdá, že nemá žádný rozdíl s běžným textem v HTML.

Základní styly textu

Text lze také stylizovat s vlastnostmi CSS, jako je například hmotnost písma, styl fontu, a text-dekorace které lze provést buď prostřednictvím inline-styl, interní styl nebo externího stylu jako jsme diskutovali v předchozím příspěvku o Styling SVG s CSS. Zde je několik příkladů.

tučně

 Toto je text v Scalable Vector Graphic (SVG) 

Kurzíva

 Toto je kurzíva v Scalable Vector Graphic (SVG) 

Zdůraznit

 Toto je podtržený text v Scalable Vector Graphic (SVG) 

Živel

V některých případech, kdy chceme pouze aplikovat styly nebo atributy na určitou část textu, můžeme použít . Tento příklad ukazuje, jak přidáváme tučně, kurzíva a zdůraznit na jeden řádek textu.

 To je tučné, toto je kurzíva a to je podtrženo 

Režim zápisu

Text není pouze napsán zleva do prava. V jiných částech světa, například v Japonsku, je text napsán zhora dolů. V SVG to lze provést pomocí režim zápisu atribut.

 ぁ ぃ ぅ ぇ ぉ か き  

Ve výše uvedeném příkladu jsme vložili několik náhodných japonských znaků (nepýtaj se na jejich význam, opravdu nemám ponětí) a změnou orientace tímto deklarací stylu, režim zápisu: tb, kde tb stojí za to zhora dolů.

Obrys textu

Text v SVG je v podstatě grafika, tak můžeme použít i mrtvice atributu přidáme hraniční čáru do Textu stejně jako my s ostatními tvary.

Ve výše uvedeném útržku kódu jsme přidali mrtvice atribut a odstraňte barvu textu zadáním vyplnit přisuzovat žádný výsledkem bude následující textová prezentace.

Textová cesta

V SVG je Text nejen schopen zobrazovat vodorovně a svisle, ale také následovat vzor cesty. Zde je návod, jak to udělat.

Za prvé, musíme definovat cesta. Vytvoření cesty přímo v HTML však není tak intuitivní, musíme porozumět souřadnicím a některým příkazům, o kterých jsem si jist, že se většina z nás bude snažit vyhnout. Abychom tento krok učinili jednodušším, osobně navrhuji pouze otevřít vektorový editor (Inkscape nebo Illustrator), vytvořit cestu a vygenerovat kód SVG.

Pak dejte prvek uvnitř živel. defs zde se rozumí definice.

Všimněte si, že jsme také přidali id atribut . Nyní musíme propojit pouze cestu id k našemu textu prvek;

    Lorem ipsum dolor sit amet consectetur.   

Další čtení: Cesty SVG

Přechod textu

Přidání pozadí pro vyplnění textu je také možné v SVG, a pokud jste uspěli v sekci Textová cesta výše, bylo by to mnohem snazší.

Nejprve musíme definovat barvy přechodu.

Když jsou nastaveny všechny potřebné definice, nyní stačí přidat text a odkazovat vyplnit atributu gradientu id atributu;

 Spád 

A tady je, text s gradientem.

Další čtení: Přechod a vzor SVG

Další odkazy

Text v SVG je nepochybně mocný, existuje mnoho věcí, které jsme schopni udělat nad rámec toho, co můžeme v tomto příspěvku ubytovat. Níže uvádíme několik dalších odkazů, které slouží vašemu zájmu o toto téma.

• O fontech v SVG - Divya Manian
• Oficiální dokumentace SVG - W3.org
• SVG Dovumentation v Mozilla Dev. Síť s příklady a nástroji - MDN
• Atribut režimu zápisu SVG - MDN

• Zobrazit ukázku
• Stáhněte si zdroj