Zur Startseite - about-svg.de
  Scripting
  DOM
  getDocument
  getElementById
  get...sByTagName
  getStyle
  setAttribute
  createElement
  get...TextLenght
   

 

 

 

Scripting

 

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.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<?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">

<svg width="400" height="220">

<defs>

<script type="text/javascript">

<![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>

<rect id="rect" x="50" y="90" width="10" height="80" rx="5" ry="5" stroke="#fff"
fill="#990000" onclick="wachsen(evt)" cursor="pointer"/>

</svg>

 

  nach oben 

 
 
  Zum Leipzig-Entertainer (SVG)  
     
  Zum Campusplan (SVG)  
     
  Zum SVG-Tutorial (SVG)  
     
  Zum Wankelmotor (SVG)