SVG tvůrce

stručný průvodce SVG grafikou

Element polyline

Elementem polyline se vytváří čára, jenž může být několikráte na libovolném místě lomená. Typickým využitím je tvorba různých grafů. Podobně jako při vytváření jednoduché přímé čáry (element line) i zde používáme k určení barvy čáry a její tloušťky atributy stroke a stroke-width. Nejkomplikovanější je ale zadávání hodnot do atributu points. Jde o řetězec čísel uspořádaných do dvojic, přičemž čísla v každé dvojici představují souřadnice na osách x a y. Čísla ve dvojici se od sebe oddělují čárkou, jednotlivé dvojice pak mezerou. Každá dvojice souřadnic definují polohy bodů, kudy bude čára procházet.

Následující kód vytvoří čáru v jednom bodě lomenou. K určení jejího tvaru bylo zapotřebí zadat tři dvojice souřadnic. Souřadnice počátečního bodu, pak místa, kde se bude čára lomit a nakonec souřadnice koncového bodu čáry.

<polyline fill="none" stroke="red" stroke-width="3px" points="20,30 100,150 180,30" />
gif_obraz

Složitější příklad elementu polyline:

<polyline fill="none" stroke="lawngreen" stroke-width="3px" points="20,30 20,150 50,150 50,100 90,70 130,100 130,150 180,150 " />
gif_obraz

Element polygon

Použití elementu polygon je témeř shodné s elementem polyline, rozdíl je však v tom, že čárami vykreslený útvar se vždy automaticky uzavře.

Následující kód má naprosto stejné atributy jako první uvedený příklad s jednoduchou lomenou čarou, rozdíl je pouze v názvu elementu. Odlišný vzhled obrázku je zřejmý.

<polygon fill="none" stroke="red" stroke-width="3px" points="20,30 100,150 180,30" />
gif_obraz
Element Polyline a Polygon - nejpoužívanější atributy
atributpopis
pointssouřadnice bodů, přes které čára prochází
strokebarva čáry
stroke-widthtloušťka čáry

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