Kreslení - SVG grafika
| publikováno: | 22.12.2003, vydavatel a autor není-li uvedeno jinak: Libor Kolman, kolmanl@volny.cz |
| na http://kolmanl.info, v sekci Modeláø a poèítaè, na stránce http://www.kolmanl.info/index.php?show=pc_tip_2 |
Pokud potøebuji na své stránce nìco graficky vyjádøit, používám kreslící program Callisto, jehož výstupem je rastrová grafika. Obèas mì napadne, jak by se nìco dalo hezky popsat obrázkem, který by se hýbal. Protože žádný software, který by umìl vygenerovat pohyblivou grafiku nemám, zaèal je zkoumat co je možné použít. Až mi padl do oka èlánek o rodícím se standardu SVG.
Pro pøedstavu uvedu pøíklad:
<svg width="500"
height="150">
<rect x="31" y="38"
width="89" height="56"
style="fill:rgb(192,192,255);stroke:rgb(0,0,128);stroke-width:1"/>
</svg>
Tento kód vykreslí obdélník s modrou výplní:
Rozpohybování:
<svg width="500"
height="150">
<rect x="31" y="38"
width="89" height="56"
style="fill:rgb(192,192,255);
stroke:rgb(0,0,128);
stroke-width:1">
<animate attributeName="x"
begin="0s"
dur="5s" fill="freeze"
calcMode="linear"
to="267">
</animate>
<animate attributeName="y"
begin="0s"
dur="5s"
fill="freeze"
calcMode="linear"
to="38">
</animate>
<animate attributeName="width"
begin="0s"
dur="5s"
fill="freeze"
calcMode="linear"
to="89">
</animate>
<animate attributeName="height"
begin="0s"
dur="5s"
fill="freeze"
calcMode="linear"
to="56">
</animate>
</rect>
</svg>
Tento kód také vykreslí modrý obdélník, ale navíc ho rozpohybuje. Vypadá to takto:
Pokud nic nevidíte (mìli byste vidìt modrý obdélník pohybující se zleva doprava 5 sekund), nepodporuje váš prohlížeè zobrazení SVG grafiky.
http://www.kolmanl.info