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

 

 

 

setAttribute()

 

setAttribute(attributeName,Wert)

Das aufgerufene Attribut wird angesteuert und dem Wert entsprechend angepasst.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<script type="text/javascript">
<![CDATA[
function gruen(evt) {
var doku = evt.target();
var owner = doku.ownerDocument();
var elem = owner.getElementById('poly');
var hin = elem.getAttribute('fill');
var gruenes= elem.setAttribute('fill','green');
}

function blau(evt) {
var doku = evt.target();
var owner = doku.ownerDocument();
var elem = owner.getElementById('poly');
var hin = elem.getAttribute('fill');
var gruenes= elem.setAttribute('fill','blue');
}

function gelb(evt) {
var doku = evt.target();
var owner = doku.ownerDocument();
var elem = owner.getElementById('poly');
var hin = elem.getAttribute('fill');
var gruenes= elem.setAttribute('fill','yellow');
}

function orange(evt) {
var doku = evt.target();
var owner = doku.ownerDocument();
var elem = owner.getElementById('poly');
var hin = elem.getAttribute('fill');
var gruenes= elem.setAttribute('fill','orange');
}

function remover(evt) {
var doku = evt.target();
var owner = doku.ownerDocument();
var elem = owner.getElementById('poly');
var hin = elem.getAttribute('fill');
var gruenes= elem.setAttribute('fill','none');
}
]]>
</script>

<a xlink:href="" onclick="gruen(evt)">
<text x="200" y="60" fill="white">
<tspan>grünes Haus</tspan>
</text>
</a>
<a xlink:href="" onclick="blau(evt)">
<text x="200" y="90" fill="white">
<tspan>blaues Haus</tspan>
</text>
</a>
<a xlink:href="" onclick="gelb(evt)">
<text x="200" y="120" fill="white">
<tspan>gelbes Haus</tspan>
</text>
</a>
<a xlink:href="" onclick="orange(evt)">
<text x="200" y="150" fill="white">
<tspan>orange-farbenes Haus</tspan>
</text>
</a>
<a xlink:href="" onclick="remover(evt)">
<text x="200" y="180" fill="white">
<tspan>leeres Haus</tspan>
</text>
</a>

<g transform="scale(0.7,0.7) translate(0,-250)">
<polyline id="poly" stroke="yellow" fill="none" stroke-width="3px"
points=" 70,400 150,350 180,370 180,350 200,350 200,380
235,400 235,470 70,470 70,400" />
</g>

 

  nach oben 

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