SVG tvůrce

stručný průvodce SVG grafikou

Element line

Element line slouží k vykreslení jednoduché přímé čáry. Ta se vykreslí mezi dvěma body jejichž souřadnice zadáme v atributech. Jelikož je poloha každého ze dvou bodů určena dvěmi souřadicemi, potřebujeme k umístění čáry do obrazu celkem čtyři atributy. První dva atributy x1 a y1 stanoví polohu prvního ze dvou bodů. Zbývající dva atributy x2 a y2 pak stanoví polohu druhého bodu. Souřadnice x udává vzdálenost od levého okraje obrazu, souřadnice y pak vzdálenost od horního okraje obrazu, což platí pochopitelně i pro ostatní obrazové elementy SVG grafiky.

Čáře je třeba určit barvu, což lze učinit pomocí atributu stroke. Šířku čáry zadáme atributem stroke-width.

Následující kód vygeneruje čáru černé barvy 2 pixely širokou, přičemž bude začínat 20 pixelů od levého i horního okraje a konec čáry bude 100 pixelů od levého okraje a 20 pixelů od horního okraje. Jelikož jsou hodnoty atributů y1 a y2 v tomto případě shodné, čára se bude jevit jako vodorovná:

<line x1="20px" y1="20px" x2="250px" y2="20px" stroke="black" stroke-width="2px" />
gif_obraz
Element Line - nejpoužívanější atributy
atributpopis
x1souřadnice na ose x prvního bodu
y1souřadnice na ose y prvního bodu
x2souřadnice na ose x druhého bodu
y2souřadnice na ose x druhého bodu
strokebarva čáry
stroke-widthtloušťka čáry
stroke-dasharraydefinice přerušování čáry

Nesouvislá čára

Někdy potřebujeme vytvořit čárkovanou či tečkovanou čáru. V SVG grafice tuto možnost máme. Styl čáry a způsob její "přerušovanosti" určujeme atributem stroke-dasharray. Tento atribut očekává zadání délkových hodnot v příslušných jednotkách. Jestliže zadáme jednu hodnotu, čára bude přerušována úseky zadané délky a to symetricky tzn. že úsek s vykreslenou čarou bude prostřídáván se stejně dlouhými úseky bez vykreslení. Pokud zadáme dvě hodnoty, pak ta první bude určovat délku vykreslených úseků a druhá hodnota délku nevykreslených úseků.

Níže uvedený kód vykreslí symetricky přerušovanou čáru:

<line x1="20px" y1="20px" x2="250px" y2="20px" stroke="black" stroke-width="2px" stroke-dasharray="5px" />
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