Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

SVG - tekst

Email Drukuj PDF

Podstawowy kod

Za pomocą technik SVG na obrazach możemy umieszczać tekst. Przykładowo:

<svg width="400" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="20" y="25" >Jakiś tekst w ramach SVG</text>
</svg>

Kod powoduje umieszczenie początku tekstu w odległości 20 pikseli od lewego marginesu (x="20") i dolnego brzegu (!) tekstu 25 pikseli od górnego merginesu (y="25").

Uwaga: tekst w SVG nie jest automatycznie zawijany - jeśli chcesz utworzyć kilka wierszy tekstu, musisz wpisać i pozycjonować każdy wiersz z osobna.

Jakiś tekst w ramach SVG

Atrybuty tekstu

Kod font-family="nazwa" powoduje wybranie konkretnej czcionki lub rodziny.

To jest czcionka Times To jest czcionka Cursive To jest czcionka Tahoma To jest czcionka Arial To jest czcionka monospace To jest czcionka sans serif To jest czcionka serif To jest czcionka Verdana To jest czcionka Fantasy To jest Arial Black To jest czcionka Calibri

Kod font-size="wartość" powoduje wskazanie wielkości czcionki (domyślnie w pikselach, ale można podać jawnie w punktach).

To jest czcionka Times 10 To jest czcionka Times 25 To jest czcionka Times 50

Kod fill="wartość koloru" powoduje wybranie koloru tekstu.

To jest czcionka w kolorze #000000 To jest czcionka w kolorze red To jest czcionka w kolorze darkkhaki

Kod stroke-width="grubość obramowania" powoduje wybranie grubości obramowania w pikselach (obramowanie w czerwonym kolorze).

To jest czcionka o grubości obramowania 0 To jest czcionka o grubości obramowania 1 To jest czcionka o grubości obramowania 3

Kod stroke="kolor" powoduje wybranie koloru obramowania.

To jest czcionka o kolorze obramowania red To jest czcionka o kolorze obramowania black To jest czcionka o kolorze obramowania blue

Kod letter-spacing="wartość" powoduje wstawienie odstępów między literami (domyślna wartość to 1).

Odstępy między literami 0 Odstępy między literami 1 Odstępy między literami 2

Możemy stosować polecenia znane ze specyfikacji styów, np. font-style="italic" dla kursywy czy font-weight="bold" dla pogrubienia.

Rotacja tekstu

Tekst może być obracany za pomocą polecenia obracania poznanego już w rozdziale o transformacjach.

Polecenie transform="rotate(20 30 30)" obraca tekst o 20 stopni wokół punktu 30,30.

To jest obrócony tekst

Polecenie transform="rotate(-20 30 30)" obraca tekst o -20 stopni wokół punktu 30,30.

To jest obrócony tekst

Link internetowy

Tekst można objąć zewnętrznym poleceniem linkowania, podobnym w swojej istocie do polecenia w języku HTML:

<a xlink:href="http://www.helion.pl">

<text fill="#000000" stroke="#000000" stroke-width="0" x="140" y="50" 
font-size="24" font-family="serif" font-weight="bold" >
Wydawnictwo Helion
</text>

</a>

Możliwe jest też użycie parametru target kierującego do osobnego okna.

Gdy przesuniesz kursor myszy nad napis, będziesz mógł kliknąć i przejść do zakodowanego pod napisem adresu internetowego.

Wydawnictwo Helion

Pozycjonowanie fragmentów tekstu

Polecenie o przykładowej postaci:

<text x="20" y="30">
    <tspan>Pierwszy wiersz</tspan>
    <tspan>Drugi wiersz</tspan>
</text>

tworzy uklad kilku fragmentów tekstu pozycjonowanych w naturalny sposób jeden za drugim.

Pierwszy wiersz Drugi wiersz

Gdy zastosujemy dodatkowe parametry dx (czyli delta x) i dy (czyli delta y), uzyskamy dodatkowe odstępy - poziome i pionowe, o dodatniej lub ujemnej wartości, np.:

<text x="20" y="30">
    <tspan>Pierwszy wiersz</tspan>
    <tspan dx="-20" dy="30">Drugi wiersz</tspan>
</text>
Pierwszy wiersz Drugi wiersz

Możemy też ustalić absolutną pozycję x każdego z fragmentów, aby rozpoczynały się w tej samej odległości od lewego marginesu:

<text x="20" y="30">
    <tspan x="10">Pierwszy wiersz</tspan>
    <tspan x="10" dy="30">Drugi wiersz</tspan>
    <tspan x="10" dy="30">Trzeci wiersz</tspan>
</text>
Pierwszy wiersz Drugi wiersz Trzeci wiersz

Tekst na ścieżce

Możliwe jest zdefiniowanie ścieżki, umieszczenie jej w bloku defs, a następnie podanie tekstu i odwołanie się do ścieżki, przykładowo:

<defs>
    <path id="sciezka01" d="M50,20 a1,1 0 0,0 150,0" />
</defs>
<text x="10" y="80" font-size="25" style="fill:blue;">
    <textPath xlink:href="#sciezka01">Jakiś tekst na ścieżce</textPath>
</text>
Jakiś tekst na ścieżce
 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V