SVG tvůrce

stručný průvodce SVG grafikou

Element rect

Elementem rect vytváříme obdélník. K zadání jeho polohy v obraze stačí jen dva atributy a to x a y, jenž určují souřadnice levého horního rohu obdélníku. Celkové rozměry jsou pak dány atributy width a height, přičemž budou-li mít tyto stejnou hodnotu, bude vykreslen přesný čtverec.

Příklad kódu generujícího obdélník a čtverec:

<rect x="40px" y="40px" width="200px" height="50px" stroke="black" fill="lime" />
<rect x="80px" y="120px" width="150px" height="150px" stroke="black" fill="green" />
gif_obraz
Element Rect - nejpoužívanější atributy
atributpopis
xsouřadnice levého horního rohu na ose x
ysouřadnice levého horního rohu na ose y
widthšířka obdélníku
heightvýška obdélníku
strokebarva okraje kruhu
fillbarva výplně obdélníku

Obdélník se zakulacenými rohy

Jestliže doplníme element rect atributem rx nebo ry je možné obdélníku zakulatit rohy. Tyto atributy určují rádius elips v osách x nebo y, které budou použity pro vytvoření zakulacených rohů. K jednoduchému zakulacení postačí uvést jen atribut rx.

Níže uvedený kód vykreslí dva obdélníky se zakulacenými rohy:

<rect x="40px" y="40px" width="200px" height="50px" rx="10px" ry="20px" stroke="black" fill="maroon" />
<rect x="40px" y="120px" width="150px" height="50px" rx="10px" stroke="black" fill="goldenrod" />
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