SVG-Element springt durch die Gegend von svgPaule, 29.07.2008 14:51

SVG-Element springt durch die Gegend

svgPaule 29.07.2008 14:51

javascript

Hallo,

fährt der Mauszeiger über die SVG-Gruppe id="actionEvent", sollte die Gruppe mit seinen enthaltenen Elementen etwas grösser werden und das Zentrum auf der gleichen Position bleiben. Wird der Mauszeiger aus der SVG-Gruppe gezogen, soll diese ihre Ursprungsgestalt wieder haben.
Und das ganze, wenn es ginge, mit Batik und Netscape-Rhino (hab'ich spass).

Leider springt die SVG-Gruppe wild durch die Gegend:-( Was mach ich falsch?

<?xml version="1.0" standalone="yes"?>
<svg contentScriptType="text/ecmascript" width="1400" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" zoomAndPan="magnify" contentStyleType="text/css" height="946" viewBox="0 0 1400 946" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" version="1.0">

<defs>
<script type="text/ecmascript"><![CDATA[

   function toggleColor(event, targetID)  
   {  
    var eventType = event.getType();  
    var svgObj = document.getElementById(targetID);  
    var childs = svgObj.getChildNodes();  
  
    switch(eventType){  
     // Die Gruppe id="actionEvent" soll groesser werden  
     case "mouseover":  
      svgObj.setAttributeNS(null, 'transform', 'scale(0.7,0.7)');  
      for (var i=0; i<childs.getLength(); i++){  
       if (childs.item(i).getNodeType() == 1){  
        var x = childs.item(i).getAttributeNS(null, 'x');  
        var y = childs.item(i).getAttributeNS(null, 'y');  
  
        childs.item(i).setAttributeNS(null, 'x', x/0.7*0.5);  
        childs.item(i).setAttributeNS(null, 'y', y/0.7*0.5);  
       }  
       else  
       if (childs.item(i).getNodeType() == 3){  
        var x = childs.item(i).getAttributeNS(null, 'x');  
        var y = childs.item(i).getAttributeNS(null, 'y');  
  
        childs.item(i).setAttributeNS(null, 'x', x/0.7*0.5);  
        childs.item(i).setAttributeNS(null, 'y', y/0.7*0.5);  
       }  
      }  
      break;  
     // Die Gruppe id="actionEvent" soll kleiner werden  
     case "mouseout":  
      svgObj.setAttributeNS(null, 'transform', 'scale(0.5,0.5)');  
      for (var i=0; i<childs.getLength(); i++){  
       if (childs.item(i).getNodeType() == 1){  
        var x = childs.item(i).getAttributeNS(null, 'x');  
        var y = childs.item(i).getAttributeNS(null, 'y');  
  
        childs.item(i).setAttributeNS(null, 'x', x/0.5*0.7);  
        childs.item(i).setAttributeNS(null, 'y', y/0.5*0.7);  
       }  
       else  
       if (childs.item(i).getNodeType() == 3){  
        var x = childs.item(i).getAttributeNS(null, 'x');  
        var y = childs.item(i).getAttributeNS(null, 'y');  
  
        childs.item(i).setAttributeNS(null, 'x', x/0.5*0.7);  
        childs.item(i).setAttributeNS(null, 'y', y/0.5*0.7);  
       }  
      }  
      break;  
     case "mousedown":  
      break;  
     default:  
      break;  
    }  
   }

]]></script>
</defs>

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

svgPaule: SVG-Element springt durch die Gegend

SVG-Element springt durch die Gegend

SVG-Element springt durch die Gegend