SVG tvůrce

stručný průvodce SVG grafikou

Skriptování

Možnost skriptování posouvá praktickou použitelnost formátu SVG o celý "řád" výše. Díky skriptům se původně statický obrázek mění v aplikaci reagující na obsluhu uživatele. Když si uvědomíme, že formát SVG zvládá navíc i animace, musíme dojít k přesvědčení, že máme naráz k dispozici něco, co zcela může nahradit známou a hojně používanou technologii Flash.

Principem funkce skriptů je nejčastěji modifikace stromu SVG dokumentu pomocí rozhraní DOM tak, jak je to možné i v XHTML dokumentech. Pokud tedy známe metody jako setAttribute(), createElement(), appendChild() a další, nebude pro nás jistě problém nějaký ten obrázek "oskriptovat". Mezi metodami DOMu vede v četnosti použití jednoznačně metoda setAttribute(), kterou se nastavuje hodnota vybraného atributu. Změny hodnot atributů jsou tedy tím, co nejčastěji od skriptu chceme, abychom dosáhli požadovaných změn vzhledu SVG obrázku. Metoda setAttribute() očekává dva parametry. Prvním je název atributu, druhým hodnota atributu. Následující ukázka představuje jeden řádek kódu, kterým bychom změnili barvu výplně grafického elementu:

document.getElementById("ctverec").setAttribute("fill","blue");

Jednotlivým elementům grafiky můžeme připojovat i události jako jsou onclick, onmouseover a podobně, opět tak, jak se to dělá v html dokumentech. Vyvolání těchto událostí pak spustí vybranou funkci. Následující skriptovaný obrázek je příkladem použití funkce setAttribute() kombinované s voláním událostí. Modrý kruh reaguje na kliknutí změnou barvy na červenou, žlutý kruh po kliknutí zobrazí hlášku typu alert.

alternativni

Zdrojový kód celého obrázku vypadá takto:

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="280px" version="1.0"> <script type="text/ecmascript"> <![CDATA[ function ZmenaBarvy() { document.getElementById("kruh_modry").setAttribute("fill","red"); } function ZobrazHlasku() { alert("klikl jste na žlutý kruh"); } ]]> </script> <circle id="kruh_modry" cx="100px" cy="100px" r="50px" fill="blue" stroke="black" onclick="ZmenaBarvy()" /> <circle cx="300px" cy="100px" r="50px" fill="yellow" stroke="black" onclick="ZobrazHlasku()" /> </svg>

O něco pokročilejší příklad použítí metody setAttribute() si můžete vyzkoušet na samostatné stránce, kde SVG spolupracuje s obsahem html stránky a vzhled obrázku se mění na základě dat zadávaných do formuláře - Editor kruhu. Přímý odkaz zde.

Jak už jste si jistě z dříve uvedého zdrojového kódu všimli, skript se vkládá do SVG dokumentu prostřednictvím elementu <script> Řádky skriptu by se navíc měly vložit do sekce CDATA, aby případně nekolidovaly se syntaxí jazyka XML, od kterého je SVG odvozeno. Jako typ skriptu bychom měli uvést text/ecmascript. Pokud použijeme text/javascript, skript bude ve webových prohlížečích funkční, ale pokud budeme naše výtvory prohlížet například v Batiku, nemusejí skripty na typu text/javascript fungovat správně. Typ text/ecmascript tedy zajistí pokud možno největší přenositelnost.

 

SVG DOM

Při skriptování SVG nejsme omezeni jen možnostmi "klasického DOMu". Formát SVG s sebou přináší celou sadu objektů a jejich metod a vlastností, které byly vytvořeny jen pro něj, tedy ryze pro formát SVG. Aplikace, které podporují SVG by měly automaticky podporovat i SVG DOM. Problematika SVG DOMU je poměrně obsáhlá, a proto se s použitím tohoto rozhraní seznámíme jen lehce. Další potřebné informace můžeme získat v oficiální dokumentaci SVG.

Jako první příklad použití SVG DOM, si představíme třeba metodu getTotalLength() objektu SVGPathElement. Tato metoda dokáže spočítat délku cesty vytvořené elementem path. Kdyby této metody nebylo, jen těžko bychom určili délku cesty, jelikož ta může mít dosti složitý průběh. Obrázek níže zobrazuje cestu. Kliknutím na ni, se zobrazí délka cesty formou hlášky(alert). Pod obrázkem je zdrojový kód celého obrázku, ze kterého snadno pochopíte jak metodu použít.

alternativni
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="280px" version="1.0"> <script type="text/ecmascript"> <![CDATA[ function ZobrazDelku() { var delka = document.getElementById("cesta").getTotalLength(); alert(delka); } ]]> </script> <path id="cesta" fill="none" stroke="green" stroke-width="20px" d="M20,120 Q70,80 120,120 T220,120" onclick="ZobrazDelku()" /> </svg>

Dalším příkladem budiž metoda getNumberOfChars() objektu SVGTextContentElement, která vrací počet znaků textu v elementu text. Zde je zdrojový kód části skriptu, který tuto funkci použije:

var pocet = document.getElementsByTagName("text")[0].getNumberOfChars();

Skriptování animací

Možnost skriptovat animace je tak trochu další dimenzí skriptů v SVG. Metodou SVG DOMu, jenž zastaví animace v celém obrázku je pauseAnimations(), jejím opakem je unpauseAnimations(). Pro potřeby skriptu zjistíme aktuální stav pozastavení animace metodou animationsPaused(), jenž vrátí booleovskou hodnotu, která nám sdělí, zda je animace pozastavena či nikoli. Obrázek níže demonstruje použití zmíněných metod. Klikáním na tlačítko ovládej animaci můžeme opakovaně spouštět a zastavovat změny průměru kruhu.

alternativni

Zdrojový kód obrázku:

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="280px" version="1.0"> <script type="text/ecmascript"> <![CDATA[ function Anim() { var stav = document.rootElement.animationsPaused(); if(stav==false) { document.rootElement.pauseAnimations(); } else { document.rootElement.unpauseAnimations(); } } ]]> </script> <circle cx="80px" cy="80px" r="50px" fill="blue" stroke="black"> <animate id="prvni" begin="druha.end;1s" attributeName="r" dur="2s" from="50" to="0" fill="freeze" /> <animate id="druha" begin="prvni.end" attributeName="r" dur="2s" from="0" to="50" fill="freeze" /> </circle> <g cursor="pointer" onclick="Anim()"> <rect x="150px" y="60px" width="115px" height="40px" fill="green" stroke="black" /> <text x="160px" y="85px" fill="black" font-size="14px">Ovládej animaci</text> </g> </svg>

Jak už bylo popsáno, metody pauseAnimations() a unpauseAnimations() ovládají všechny animace v obrázku najednou. V praxi ale často vzniká potřeba skriptem ovládat jen jednu konkrétní animaci z mnoha. K tomu účelu je k dispozici další rozhraní a to SMIL DOM. Její nejpoužívanější metody jsou beginElement() a endElement(), které započnou nebo ukončí vybranou animaci. Na obrázku pod textem můžete tlačítky spouštět animace každého jednoho kruhu nezávisle na sobě. Adobe SVG Viewer 6 skript nespustí.

alternativni

Zdrojový kód obrázku:

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="280px" version="1.0"> <script type="text/ecmascript"> <![CDATA[ function AnimovatModry() { document.getElementById("anim1").beginElement(); } function AnimovatZluty() { document.getElementById("anim2").beginElement(); } ]]> </script> <circle cx="100px" cy="100px" r="60px" fill="blue" stroke="black"> <animate id="anim1" attributeName="r" begin="20h" dur="8s" from="60" to="0" fill="freeze" /> </circle> <circle cx="300px" cy="100px" r="60px" fill="yellow" stroke="black"> <animate id="anim2" attributeName="r" begin="20h" dur="8s" from="60" to="0" fill="freeze" /> </circle> <g onclick="AnimovatModry()" cursor="pointer"> <rect x="20px" y="200px" rx="10px" width="150px" height="40px" fill="black" /> <text x="35px" y="225px" fill="white" font-size="12px">Animovat modrý kruh</text> </g> <g onclick="AnimovatZluty()" cursor="pointer"> <rect x="220px" y="200px" rx="10px" width="150px" height="40px" fill="black" /> <text x="235px" y="225px" fill="white" font-size="12px">Animovat žlutý kruh</text> </g> </svg>

 

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