SVG tvůrce

stručný průvodce SVG grafikou

Transformace - atribut transform

U grafických objektů jako jsou například line, circle, rect, path a pod., můžeme použít atribut transform. Pomocí něj je možné objekt přemístit, změnit mu velikost nebo tvar. Tento atribut nám může značně ulehčit práci s ručním zápisem kódu, neboť pokud bychom chtěli změnu polohy nebo rozměrů provést změnou souřadnic, tak zejména u složitějších objektů (polyline, path) by to znamenalo nutnost zdlouhavého přepočítávání. Zde je seznam transformací, které můžeme tímto atributem provádět:

Všechny možnosti zde rozebírat nebudeme. Ukážeme si jen dvě nejužitečnější tj. přesun a rotaci.

Přesun

Pokud chceme uskutečnit přesun, řetězec v atributu transform musí začínat slovem translate. Za ním jsou pak v závorce hodnoty, které vyjadřují o jakou vzdálenost a na jaké ose má být objekt přesunut. První hodnota udává posun na ose x, druhá pak posun na ose y. Druhá hodnota je nepovinná. Pokud ji neuvedeme, provede se jen přesun v ose x. Jestliže uvedeme obě hodnoty, tak musí být vzájemně odděleny čárkou.

Zde je příklad zdrojového kódu s elementem circle, který je přesunut o 50px dále na ose x a o 30px dále na ose y:

<circle cx="200px" cy="200px" r="100px" fill="blue" stroke="black" transform="translate(50,30)" />

Rotace

Má-li být výsledkem naší snahy rotace objektu, tak řetězec v atributu transform musí začínat slovem rotate. Za ním je v závorce číslo vyjadřující úhel o který se má objekt otočit. S narůstající hodnotou úhlu se objekt otáčí ve směru hodinových ručiček. Pokud chceme otáčet opačným směrem, je třeba zadávat hodnotu se znaménkem mínus.

Zde je příklad zdrojového kódu vytvářejícího text otočený o 90 stupňů:

<text x="20px" y="-20px" fill="black" font-family="Verdana" font-size="24px" transform="rotate(90)">SVG</text>

Vytvořený obraz bude vypadat takto:

gif_obraz

Při prvních experimentech s rotací brzy zjistíme, že s rostoucím úhlem otáčení často dochází také k výrazné změně polohy objektu v obraze - při větších úhlech dokonce může objekt "vyjet" mimo zobrazovanou oblast. Je to proto, že se objekt otáčí kolem bodu v souřadnicích 0,0 ,tedy kolem horního levého rohu obrazu. Naštěstí je možné přesně určit polohu bodu kolem kterého bude rotace probíhat, a to tak, že za hodnotu úhlu v atributu transform připíšeme další dvě čísla stanovující polohu středu otáčení na osách x a y:

<rect x="40px" y="40px" width="50px" height="50px" fill="lightgray" stroke="black" transform="rotate(30, 65, 65)" />

Ukázka rotovaného objektu s určeným středem otáčení:

gif_obraz

Obrázky na stránce jsou ukázkami zobrazení v podobě bitmapy (formát GIF). Pokud chcete zobrazit svg grafiku přímo, klikněte na tlačítko pod textem. Všechny obrázky pak budou nahrazeny elementy object, které zobrazí přímo svg soubory. Nutný je nainstalovaný ADOBE SVG VIEWER.

Nahraď obrázky GIF za SVG

 

xhtml_valid_icon css_valid_icon
texty, webdesign, programování: Jakub Kosek