Praca z tekstem w skalowalnej grafice wektorowej (SVG)
W naszych poprzednich postach używaliśmy SVG do tworzenia kształtów. W tym poście, jak mówi tytuł, zajmiemy się tym tworzenie tekstu za pomocą SVG. Jest wiele rzeczy, które możemy zrobić z tekstem wykraczającym poza zwykły tekst HTML.
Sprawdźmy je.
Podstawowe wdrożenie
Ale zanim pójdziemy dalej, zobaczmy, jak Tekst w SVG powstaje na bardzo podstawowym poziomie:
Tekst w SVG, jak widać z powyższego fragmentu kodu, jest zdefiniowany z wystarczająco logicznym znacznikiem, x i y atrybuty określające współrzędne linii bazowej.
Źródło obrazu: Wikipedia.org
Oto jak będzie wyglądał tekst. Na razie wydaje się, że nie ma różnicy w stosunku do zwykłego tekstu w HTML.
Podstawowe style tekstu
Tekst może być również stylizowany za pomocą właściwości CSS, takich jak grubość czcionki, styl czcionki, i dekoracja tekstowa które można zrealizować za pośrednictwem w stylu inline, styl wewnętrzny lub styl zewnętrzny jak omówiliśmy w poprzednim poście o Stylizacja SVG za pomocą CSS. Oto kilka przykładów.
Pogrubienie
To jest tekst w Skalowalnej Grafice Wektorowej (SVG)
italski
To jest kursywa w Skalowalnej Grafice Wektorowej (SVG)
Podkreślać
To podkreślony tekst w Skalowalnej Grafice Wektorowej (SVG)
Element
W niektórych przypadkach, gdy chcemy zastosować tylko style lub atrybuty do określonej części tekstu, możemy użyć
To jest śmiałe ,to jest kursywa ito jest podkreślone
Tryb pisania
Tekst jest nie tylko pisany z lewej na prawą. W innych częściach świata, na przykład w Japonii, tekst jest napisany z od góry do dołu. W SVG można to zrobić za pomocą tryb pisania atrybut.
ぁ ぃ ぅ ぇ ぉ か き
W powyższym przykładzie umieściliśmy kilka losowych japońskich znaków (nie pytaj mnie o ich znaczenie, naprawdę nie mam pojęcia) i zmień orientację za pomocą tej deklaracji stylu, tryb zapisu: tb, gdzie tb jest za od góry do dołu.
Zarys tekstu
Tekst w SVG jest w zasadzie grafiką, więc możemy również zastosować uderzenie atrybut, aby dodać linię graniczną do tekstu, tak jak w przypadku innych kształtów.
W powyższym fragmencie kodu dodaliśmy uderzenie przypisać do napełnić przypisują Żaden co spowoduje następującą prezentację tekstu.
Ścieżka tekstowa
W SVG tekst może być wyświetlany nie tylko poziomo i pionowo, ale może również podążaj według wzoru ścieżki. Oto jak to zrobić.
Po pierwsze, musimy zdefiniować ścieżka. Jednak utworzenie Ścieżki bezpośrednio w HTML nie jest tak intuicyjne, musimy zrozumieć współrzędne i niektóre polecenia, których jestem pewien, że większość z nas spróbuje uniknąć. Aby uczynić ten krok prostszym, osobiście proponuję otworzyć edytor wektorów (Inkscape lub Illustrator), utworzyć ścieżkę i wygenerować kod SVG.
Następnie umieść defs tutaj oznacza definicję.
Zauważ, że dodaliśmy także ID przypisać do ID do naszego tekstu z
Lorem ipsum dolor sit amet consectetur.
Dalsza lektura: Ścieżki SVG
Gradient tekstu
Dodanie tła do wypełnienia tekstu jest również możliwe w SVG, a jeśli udało ci się w powyższej sekcji Ścieżka tekstowa, byłoby to znacznie łatwiejsze.
Najpierw musimy zdefiniować kolory gradientu.
Po skonfigurowaniu wszystkich niezbędnych definicji wystarczy teraz dodać tekst i odesłać napełnić przypisać do gradientów ID atrybut, jak następuje;
Gradient
I oto jest tekst z gradientem.
Dalsza lektura: Gradient i wzór SVG
Dalsze odniesienia
Tekst w SVG jest niewątpliwie potężny, jest wiele rzeczy, które możemy zrobić poza tym, co możemy pomieścić w tym poście. Tak więc poniżej zebraliśmy kilka dodatkowych referencji, które mogą zainteresować Cię tym tematem.
- O czcionkach w SVG - Divya Manian
- Oficjalna dokumentacja tekstu SVG - W3.org
- Dokumentacja SVG w Mozilla Dev. Sieć z przykładami i narzędziami - MDN
- Atrybut trybu zapisu SVG - MDN
- Wyświetl demo
- Pobierz źródło
