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

 

 

 

getElementsByTagName()

 

Falls es einmal notwendig sein sollte, eine bestimmte Gruppe an Elementen aufrufen zu müssen, dann ist diese Methode von Vorteil. Im Gegensatz zur vorherigen Methode, spricht getElementsByTagName() die geforderten Elementtypen unterhalb eines Knotens an. Die Palette an verfügbaren Elementtypen reicht von <rect>, <circle>, <path>, <line>, <g> bis hin zum <svg>-Element. Das nächste Beispiel zeigt, wie eine Gruppe von drei Kreisen und drei Ellipsen, deren Ausgabewert wieder über alert angezeigt wird. Mit getElementsByTagName() werden die Elemente also aufgerufen und im weiteren deren Eigenschaften im alert-Fenster aufgezeigt. Die Eigenschaft um die es sich hier dreht ist die Füllungsfarbe der einzelnen Rechtecke.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<script type="text/javascript">
<![CDATA[

function kreise(evt) {

var doku = evt.target();
var owner = doku.ownerDocument();
var elem = owner.getElementsByTagName('circle');
var elcount = elem.getLength();
var output = "";
for (var i=0;i<elcount;i++) {
var aItem = elem.item(i);
output = output + aItem.getAttribute('fill') + ', ';
}

alert(output);

}

function ellipsen(evt) {

var doku = evt.target();
var owner = doku.getOwnerDocument();
var elem = owner.getElementsByTagName('ellipse');
var elcount = elem.length();
var output = "";
for (var i=0;i<elcount;i++) {
var aItem = elem.item(i);
output = output + aItem.getAttribute('fill') + ', ';
}

alert(output);

}

<a xlink:href="" onclick="kreise(evt)">
<text x="120" y="80" fill="white">
<tspan>Kreise auswerten</tspan>
</text>
</a>

<a xlink:href="" onclick="ellipsen(evt)">
<text x="120" y="130" fill="white">
<tspan>Ellipsen auswerten</tspan>
</text>
</a>

<circle cx="50" cy="60" r="10" fill="blue" stroke="#000"/>
<circle cx="50" cy="100" r="10" fill="red" stroke="#000"/>
<circle cx="50" cy="140" r="10" fill="green" stroke="#000"/>
<circle cx="50" cy="180" r="10" fill="red" opacity="0.5" stroke="#000">
<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>

<ellipse cx="300" cy="60" rx="20" ry="10" fill="#50FFA1" stroke="#000"/>
<ellipse cx="300" cy="100" rx="20" ry="10" fill="#50A5A1" stroke="#000"/>
<ellipse cx="300" cy="140" rx="20" ry="10" fill="#9703A1" stroke="#000"/>
<ellipse cx="300" cy="180" rx="20" ry="10" fill="#976B00" stroke="#000"/>


  nach oben 

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