Příklady SVG technik

1. Transformace (jen stroke)

Ukázka transformací translate, rotate a scale na obdélnících.
Všechny obdélníky mají fill="none", takže vidíme jen obrys (stroke).

2. Text v SVG a vlnitá křivka

Zde najdete příklad textu v několika řádcích s dostatečnými rozestupy a vlnitou křivkou místo jednoduchého oblouku. Text je na křivku připojen pomocí <textPath>, s startOffset a dy pro offset nad křivkou.

Dodatečná vysvětlení a parametry

Transformace

• translate(x, y) – Posunutí o vektor (x, y).
• rotate(úhel, cx, cy) – Otočení kolem bodu (cx, cy) o daný úhel (ve stupních).
• scale(sx, sy) – Změna měřítka (sx, sy). Pokud není zadáno sy, použije se hodnota sx.

Text a textPath

• <text> – Umísťuje text do souřadnic (x, y).
• <tspan> – Umožňuje část textu odlišit stylem či posunem (dx, dy).
• <textPath> – Slouží k umístění textu na křivku (path). Parametr startOffset určuje pozici začátku textu na křivce, dy nastaví svislý offset.