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

 

 

 

getDocument()

 

Zugriff auf die erweiterbaren Elemente im DOM-Baum erhält man über eine ID. Diese Identifikation, welche durch Namensgebung sinnvoll und vorteilhaft erscheint, hilft eine eindeutige Referenz zu erreichen. Sollte ein Dokument beispielsweise mehrere gleiche Elemente besitzen und man möchte nur auf ein bestimmtes zugreifen, dann ist dies einfach durch das Aufrufen des Namens möglich. Das nächste Beispiel zeigt, wie das Wurzel-Element (root-element) <svg id="svgdoku"> aufgerufen und die Attribute Höhe und Breite ausgewertet werden.

getAttributes()

Durch diese Funktion wird ein Rückgabewert erzielt, der eine Liste mit allen Attribut-Knoten darstellt.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

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

<script type="text/javascript">
<![CDATA[
function hoehebreite(evt) {
var doku = evt.target();
var owner= doku.ownerDocument();
var elem = owner.getElementById('svgdoku');
var h = elem.getAttribute('height');
var b = elem.getAttribute('width');
alert('Das SVG-Dokument ist ' + h + ' Pixel hoch und ' + b + ' Pixel breit.' )

}
]]>
</script>

<circle cx="100" cy="95" r="10" fill="#990000" opacity="0.5" onclick="hoehebreite(evt)" style="cursor:pointer">
<set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseover"/>
<set attributeName="stroke" attributeType="CSS" to="#fff" begin="mouseover"/>
<set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseout"/>
<set attributeName="stroke" attributeType="CSS" to="none" begin="mouseout"/>
</circle>

<text x="135" y="102" style="font-family:Tahoma; font-size:15pt; font-weight: bold;fill:yellow">Kreis anklicken!</text>


  nach oben 

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