Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 9   

9.2 Skalieren - die Anweisung scale

Sie können ein Objekt skalieren (in seiner Größe verändern), wenn Sie dem Attribut transform als Wert die Anweisung scale mit der Angabe des Skalierungsfakors zuweisen.

Wenn Sie, wie im obigen Beispiel nur einen Skalierungsfaktor angeben, so wird dieser für beide Achsen des temporären Koordinatensystems verwendet. Es findet also
eine proportionale Vergrößerung - durch einen Faktor größer 1 oder
eine proportionale Verkleinerung - durch einen Faktor zwischen 0 und 1
statt.

Es besteht jedoch auch die Möglichkeit zwei Faktoren zu verwenden.
Dann wird der erste Wert zu Skalierung der x-Achse und der zweite Wert zur Skalierung der y-Achse verwendet.
Sie erzeugen dann eine nicht-proportionale Vergrößerung bzw. Verkleinerung des Objekts.

Wenn sie auf ein skaliertes Koordinatensystem weitere Transformationen anwenden, beachten Sie, dass sich die Längen im Koordinatensystem entsprechend verändert haben.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das transform-Attribut</title>
<desc>scale - vergrößern oder verkleinern</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:12px;}
    ]]>
    </style>

    <symbol id="ks">
    <g id="smilie1">
      <desc>ein lachendes Smilie</desc>
      <circle id="gesicht" cx="20" cy="20" r="15"
        fill="yellow" stroke="black" />
      <circle id="auge-links" cx="15" cy="15" r="2"
        fill="black" stroke="black" />
      <circle id="auge-rechts" cx="25" cy="15" r="2"
        fill="black" stroke="black" />
      <line id="nase" x1="20" y1="18" x2="20" y2="23"
        stroke="black" stroke-width="2" />
      <path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
        stroke="black" fill="none" stroke-width="2" />
    </g>
    <g id="koord">
      <line x1="0" y1="0" x2="100" y2="0"
        stroke="red" />
      <line x1="0" y1="0" x2="0" y2="100"
        stroke="red" />
      <rect x="0" y="0" width="3" height="3"
        fill="red" />
      <rect x="0" y="97" width="3" height="3"
        fill="red" />
      <rect x="97" y="0" width="3" height="3"
        fill="red" />
    </g>
    </symbol>
  </defs>

  <svg x="10" y="10" width="380" height="380">
    <rect x="0" y="0" width="380" height="380"
      fill="none" stroke="blue" />

    <use xlink:href="#ks" transform="translate(20,10)" />
    <use xlink:href="#ks" transform="translate(20,150) scale(.5)" />
    <use xlink:href="#ks" transform="translate(150,150) scale(2)" />

    <text x="25" y="90">orginale Darstellung</text>
    <text x="25" y="250">halb so groß
      <tspan x="25" y="265">scale(.5)</tspan>
    </text>
    <text x="155" y="250">doppelt so groß
      <tspan x="155" y="265">scale(2)</tspan>
    </text>
  </svg>
</svg>
      



index  |  Kapitel 9  |  9.1  <<  | 9.2 |  >>  9.3   Rotieren - die Anweisung rotate