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

SVG Tutorial

  svg tutorial index  |  Kapitel 9   

9.3 Rotieren - die Anweisung rotate

Sie können ein Objekt rotieren, wenn Sie dem Attribut transform als Wert die Anweiung rotate mit der Angabe des Winkels zuweisen.

Zusätzlich zu Angabe des Winkels können Sie die x,y-Koordinate des Drehpunktes angeben. Alle Werte werden durch Kommata getrennt angegeben.

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>rotate - rotieren</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(100,150)" />
    <use xlink:href="#ks" transform="translate(100,150) rotate(30)" />
    <use xlink:href="#ks" transform="translate(100,150) rotate(-130)" />
    <use xlink:href="#ks" transform="translate(250,150)" />
    <use xlink:href="#ks" transform="translate(250,150) rotate(30,20,20)" />

    <text x="105" y="230">orginal</text>
    <text x="105" y="230" transform="rotate(30,105,230) translate(-40,15)">
      rotate(30)
    </text>
    <text x="105" y="230" transform="rotate(-130,105,230) translate(70,120)">
      rotate(-130)
    </text>
    <text x="255" y="230" transform="rotate(30,255,230) translate(-30)">
      rotate(30,20,20)
    </text>
  </svg>
</svg>
      

Im obigen Beispiel wird das Objekt "ks" zuerst durch zwei Transformationsanweisungen in zwei Richtungen gedreht:
rotate(30) - positive Winkel drehen das Objekt im Uhrzeigersinn,
rotate(-130) - negatige Winkel drehen das Objekt gegen den Uhrzeigersinn.
Da der Drehpunkt bei beiden Rotationsanweisungen nicht angegeben ist, wird der Nullpunkt des temporären Koordinatensystems als Drehpunkt verwendet.

Bei der dritten Rotationsanweisung wird zusätzlich die x,y-Koordinate des Objektmittelpunkts als Drehpunkt angegeben:
rotate(30,20,20) - Drehpunkt ist die Koordinate 20,20.
Beachten Sie, dass sich die Koordinate des Objektmittelpunkts nicht verändert hat, obwohl das Objekt vor der Rotationsanweisung verschoben wurde: Es wurde ja das gesamte temporäre Koordinatensystem verschoben.

.. und auch bei Rotationsanweisungen ist darauf zu achten, dass das gesamte temporäre Koordinatensystem gedreht wird. Nachfolgende Transformationsanweisungen werden also auf eine gedrehte (!) x- und y-Achse angewandt.




index  |  Kapitel 9  |  9.2  <<  | 9.3 |  >>  9.4   Verzerren - die Anweisungen skewX und skewY