Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 95
Zur Übersicht

95. Dynamische Skalierung von SVG-Objekten (22.08.2002)

Beispiel 95 zeigt die Anwendung einer JavaScript-Funktion SizeNumbers() zur dynamischen Skalierung von SVG-Inhalten. Dabei werden alle numerischen Attributwerte mit einem Faktor sizevalue multipliziert. Daraus resultierend werden die Koordinatenpositionen bzw. Angaben zu Breiten und Höhen entsprechend skaliert.


      <!-- SVG-Codeausschnitt -->
      
      <script type="text/javascript">
      <![CDATA[
      
      var aktsizevalue=1, oldsizevalue=1;
      
      function SizeNumbers(sizevalue)
      {
        aktsizevalue=sizevalue;
        sizevalue/=oldsizevalue;
        var svgdoc=document.documentElement;
        var elements=svgdoc.getElementsByTagName("*");
      
        for(i=0;i<elements.length;i++)
        {
          attributes=elements.item(i).getAttributes();
          for(j=0;j<attributes.length;j++)
          {
            if(!isNaN(attributes.item(j).nodeValue))
              attributes.item(j).nodeValue*=sizevalue; // eine Zeile
          }
        }
      
        oldsizevalue=aktsizevalue;    
      }
      
      ]]>
      </script>
      
      
Hinweis: Man kann dieses Ergebnis natürlich auch einfacher durch Setzen von transform="scale(sizevalue)" bezogen auf das Wurzelelement svg erreichen. Hier sollte jedoch der dynamische Zugriff auf Attributwerte demonstriert werden.


Zur Vermeidung von Problemen mit Mozilla 1.x-Versionen wurde im Beispiel 95 der im Tipp 91 erläuterte Workaround in der JavaScript-Version verwendet. Hinweis: Verwenden Sie bei Problemen die Download-Version zum lokalen Testen.


Ansicht von Beispiel 95 im Browser