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.
|