Główna » Kodowanie » Praca z tekstem w skalowalnej grafice wektorowej (SVG)

    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:

      To jest tekst skalowalnej grafiki wektorowej (SVG)  

    Tekst w SVG, jak widać z powyższego fragmentu kodu, jest zdefiniowany z wystarczająco logicznym znacznikiem, . Ten element zasadniczo wymaga tylko 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ć . Poniższy przykład pokazuje, jak dodajemy pogrubienie, italski i podkreślać do pojedynczego wiersza tekstu.

     To jest śmiałe, to jest kursywa i to 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.

      To jest tekst SVG  

    W powyższym fragmencie kodu dodaliśmy uderzenie przypisać do element i usuń kolor tekstu, określając 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ść element wewnątrz a element. defs tutaj oznacza definicję.

        

    Zauważ, że dodaliśmy także ID przypisać do . Teraz musimy tylko połączyć ścieżkę ID do naszego tekstu z element, tak;

        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