SVG od podstaw - filtry oraz tekst

26.06.2014
Webdev
Komentarze 0
Tweet

Filtry SVG służą do dodawania specjalnych efektów (np. rozmycie) do kształtów i tekstu. Oto lista wszystkich filtrów dostępnych w SVG:

feBlend – służy do mieszania dwóch obiektów;
feColorMatrix – służy do przebarwienia, rozjaśniania kolorów, luminacji;
feComponentTransfer – służy do regulacji jasności, kontrastu, progów obiektu;
feComposite – decyduje o wzajemnym położeniu dwóch obiektów i ich wzajemnym przenikaniu się;
feConvolveMatrix – rozmazywanie obiektów;
feDiffuseLighting – sterowanie źródłem światła na obiekty;
feDisplacementMap – określa przemieszczanie się kolorów z jednego obiektu do drugiego;
feFlood – służy do wypełniania obiektu kolorami;
feGaussianBlur – rozmycie gaussowskie;
feImage – umożliwia załadowanie do obiektu inny obiekt lub obraz;
feMerge – łączenie różnych efektów;
feMorphology – służy do zwiększania lub zmniejszania efektów na kanale alfa;
feOffset – określa położenie obiektu względem innych;
feSpecularLighting – tworzy źródło światła;
feTile – służy do duplikowania obiektu;
feTurbulence – służy do tworzenia tekstur;
feDistantLight
fePointLight
feSpotLight

Przykład użycia filtra Gaussian Blur (rozmycie gaussowskie).
Filtr w svg musi być zdefiniowany pomiędzy znacznikami <defs>. Definicję filtra umieszczamy w znaczniku <filter> oraz określamy identyfikator tego znacznika. Wewnątrz znacznika <filter> umieszczamy znacznik konkretnego filtra (w naszym przypadku <feGaussianBlur>). Atrybut stdDaviation określa zakres filtra GaussianBlur. Następnie wstawiamy kształt lub tekst, na którym chcemy zastosować filtr oraz jako jeden z atrybutów znacznika tego kształtu dodajemy filter:url(#Gaussian_Blur), gdzie za znakiem # podajemy identyfikator. Filtr GaussianBlur

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
	<filter id="Gaussian_Blur">
		<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
	</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Inne przykłady użycia filtrów można znaleźć na stronie W3Schools. Dokładna składnia wymienionych filtrów wraz z przykładami implementacji znajduje się na stronach konsorcjum W3C.

Tekst

Tekst definiujemy za pomocą znacznika <text>. Jego podstawowymi atrybutami są: x – współrzędna pozioma wskazująca bieżącą pozycję (bezwzględną) w układzie współrzędnych pierwszego znaku tekstu (jeśli podana jest pojedyńcza liczba), jeśli podana jest lista n współrzędnych rozdzielona przecinkami lub spacjami to te wartości reprezentują położenie bezwzględne dla n pierwszych liter, jeśli atrybut nie jest podany przyjmuje wartość 0, y – współrzędna pionowa wskazująca bieżącą pozycję w układzie współrzędnych pierwszego znaku tekstu (stosowanie analogiczne jak dla x), dx – odległość, o jaką zostanie przesunięty początek łańcucha znakowego z bieżącej pozycji na osi X, dy – odległość, o jaką zostanie przesunięty początek łańcucha znakowego z bieżącej pozycji na osi Y, rotate – określa obrót według bieżącej pozycji tekstu, textLength – długość tekstu. Poniższy przykład przedstawia prosty tekst. Tekst w SVG

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example text01</desc>
  <text x="100" y="150"
        font-family="Verdana" font-size="26" font-weight="bold" fill="green" >
    Witaj to jest svg!
  </text>
</svg>

Atrybuty font-family, font-size, font-weight, fill, font-style, text-decoration, word-spacing, letter-spacing określają parametry czcionki takie jak wielkość czy kolor. Poniższy przykład ilustruje użycie atrybutów dla czcionek.

<g style="font-size: 18pt">
<text x="20" y="20" style="font-weight:bold;">bold</text>
<text x="120" y="20" style="font-style:italic;">italic</text>
<text x="20" y="60" style="text-decoration:underline;">under</text>
<text x="120" y="60" style="text-decoration:overline;">over</text>
<text x="200" y="60"
style="text-decoration:line-through;">through</text>
<text x="20" y="90" style="word-spacing: 10pt;">more word space</text>
<text x="20" y="120" style="word-spacing: -3pt;">less word space</text>
<text x="20" y="150" style="letter-spacing: 5pt;">wide letter space</text>
<text x="20" y="180" style="letter-spacing: -2pt;">narrow letter
space</text>
</g>

Trzy poniższe linijki kodu pokazują jak zachowują się wypełnienia i obrysy tekstu.

<text x="20" y="30">Simplest Text</text>
<text x="20" y="70" style="stroke: black;">Outlined/filled</text>
<text x="20" y="110" style="stroke: black; stroke-width: 0.5;
fill: none;">Outlined only</text>

Kolejnym ciekawym atrybutem jest text-anchor. Służy on do wyrównania tekstu. Atrybut ten posiada trzy wartości: start, middle i end.

<g style="font-size: 16pt;">
<path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
<text x="100" y="30" style="text-anchor: start">Start</text>
<text x="100" y="60" style="text-anchor: middle">Middle</text>
<text x="100" y="90" style="text-anchor: end">End</text>
</g>

Element <text> może również zawierać znacznik <tspan>, który wprowadza jakąś charakterystyczną cechę dla podanej litery lub słowa (np. kolor lub rodzaj czcionki), odwołując jednocześnie te definicje w głównym elemencie <text>. Znacznik <tspan> posiada takie same atrybuty jak <text>. Tekst w SVG

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example text02</desc>
  <text x="100" y="150"
        font-family="Verdana" font-size="26" font-weight="bold" fill="green">
    Witaj to jest <tspan style="fill: red; font-size: 40">svg</tspan>!
  </text>
</svg>

Ciekawym zastosowaniem znacznika <tspan> i atrybutów dx i dy jest symulacja indeksów górnych i dolnych itp. Spójrzmy na poniższy kod i rysunek.

<text x="15" y="35" style="font-size: 12pt;">
F <tspan dy="4">a</tspan>
<tspan dy="8">l</tspan>
<tspan dy="12">l</tspan>
</text>

Jednakże do fachowego dodawania indeksów górnych i dolnych służy atrybut baseline-shift. Przyjmuje on jedną z wartości: sub lub super. Ilustruje to poniższy przykład.

<text x="20" y="25" style="font-size: 12pt;">
C<tspan style="baseline-shift: sub;">12</tspan>
H<tspan style="baseline-shift: sub;">22</tspan>
O<tspan style="baseline-shift: sub;">11</tspan> (sugar)
</text>
<text x="20" y="70" style="font-size: 12pt;">
6.02 x 10<tspan baseline-shift="super">23</tspan>(Avogadro's number)
</text>

Pionowy tekst

Istnieją dwa sposoby na ustawienie tekstu w orientacji pionowej. Pierwszym z nich jest transformacja przez obrót o 90 stopni (rotate). Drugi to ustawienie wartości atrybutu writing-mode na tb, co oznacza z góry na dół (top to bottom). Czasem chcemy aby litery naszego tekstu nie były obracane. Wtedy należy również ustawić właściwość glyph-orientation-vertical: 0. Najlepiej zilustruje nam to poniższy przykład.

<text x="10" y="20" transform="rotate(90,10,20)">Rotated 90</text>
<text x="50" y="20" style="writing-mode: tb;">Writing Mode tb</text>
<text x="90" y="20" style="writing-mode: tb;
glyph-orientation-vertical: 0;">Vertical zero</text>

Element <tref>

Zawartość elementu <text> może być bezpośrednio w tym elemencie lub można użyć referencji do tekstu zdefiniowanego w innym miejscu za pomocą znacznika <tref>. Atrybuty elementu <tref> są następujące: link:href="uri" – określa adres URI do fragmentu dokumentu svg zawierającego informacje tekstowe, a którego zawartość będzie wstawiona do elementu <tref>. Znacznik ten posiada również atrybuty charakterystyczne dla elementu <text>. Element tref

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <text id="ReferencedText">
      Referenced character data 
    </text>
  </defs>

  <desc>Example tref01 - inline vs reference text content</desc>
  <text x="100" y="100" font-size="35" fill="blue" >
    Inline character data
  </text>
  <text x="100" y="200" font-size="35" fill="red" >
    <tref xlink:href="#ReferencedText"/>
</text>
  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="orange" stroke-width="2" />
</svg>

Hiperłącza

Dodawanie odnośników do elementów graficznych w SVG jest proste. Używamy do tego znacznika <a>. Ma on jednak inne atrybuty niż w HTML-u. Spójrzmy na poniższy przykład.

<?xml version="1.0" standalone="yes" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

  <desc>Example text01</desc>
<a xlink:href="http://www.zvon.org" xlink:type="simple">
  <text  y="150" id="rect" font-family="Verdana" font-size="26" font-weight="bold" fill="green">
    Witaj na Pimp my pc
  </text>
 </a>
</svg>

Jak widać odnośnikiem jest tu tekst, otoczony znacznikiem <a>. Znacznik ten ma atrybuty xlink:href="http://adres_strony_do_której_ma_być_przekierowanie" oraz xlink:type="simple". Może też posiadać dodatkowe atrybuty: xlink:title – określa co ma się pojawiać po najechaniu wskaźnikiem myszy na odnośnik, xlink:show – pozwala określić czy wskazana w odnośniku strona ma zastąpić obecną (replace) czy ma zostać otworzona w nowym oknie przeglądarki (new).

Tekst na ścieżce

Aby zdefiniować tekst na ścieżce najpierw musimy określić ścieżkę wewnątrz <defs></defs>. Później wewnątrz znacznika <text> wstawiamy znacznik <textPath> z atrybutem xlink:href, w którym podajemy identyfikator do zdefiniowanej wcześniej ścieżki.

<defs>
    <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
    <textPath xlink:href="#textPath">Text on a Path</textPath>
</text>