about-svg.de

DOM

Interaktive SVGs

Um Scripts in einem SVG-Dokument zu platzieren, hat man zwei Möglichkeiten. Entweder man definiert das Skript direkt im SVG-Dokument oder legt das Skript referenziert extern ab. Für aufwendige und häufig vorkommende Skripts ist es ratsam die Programmcodes (Scripts) extern zu lagern, da es sehr schnell zu einem Übersichtsverlust kommen kann, wenn alles in einem Dokument untergebracht wird. Die hier aufgeführten Beispiele werden direkt im Dokument untergebracht. Um ein Beispiel zu geben, wie Events, Programmcode und SVG zusammen hängen, nun ein Rechteck, das mit jedem Mausklick weiter wächst.

Um die nachfolgenden Beispiele genau betrachten zu können, empfehle ich unbedingt den SVG Viewer von Adobe zu installieren. Die native Darstellung von SVGs mit Scripting lässt sehr zu wünschen übrig.

[ Zurück ]

--- Eine günstige Prepaid UMTS Flatrate mit Surfstick fürs mobile Internet. ---

Beispiel - Scripting

Quellcode: Scripting

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<defs>

<![CDATA[

function wachsen(evt) {

var doku = evt.target();
var owner = doku.ownerDocument();
var elem = owner.getElementById('rect');
var breite = elem.getAttribute('width');

if(breite >= 250) {
elem.setAttribute('width',10);

} else {

elem.setAttribute('width', breite*1+30);
}
}
]]>

</script>

</defs>

</svg>

DOM

Login Form

Main Menu

Social Bookmark

Beispiel - Scripting

Quellcode: Scripting

SVG-Projekte

Shirt-Designer