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

SVG Tutorial

  svg tutorial index  |  Kapitel 9   

9.4 Verzerren - die Anweisungen skewX und skewY

Um ein Objekt bzw. das temporäre Koordinatensystem des Objekts zu verzerren, stehen zwei Möglichkeiten zur Verfügung:
die Anweisung skewX - eine Verzerrung entlang der x-Achse und
die Anweisung skewY - eine Verzerrung entlang der y-Achse.

Sie können ein Objekt also verzerren, wenn Sie dem Attribut transform als Wert die Anweisung skewX und/oder die Anweisung skewY mit der Angabe eines Winkels zuweisen.

Dabei gibt der Winkel an, um wieviel Grad sich die jeweils "andere" Achse, auf der in der Eigenschaft genannten Achse, hin- oder wegdreht. Bei einer positiven Wikelangabe dreht sich die jeweils "andere" Achse zur genannten Achse hin: es entsteht eine Stauchung.
Bei einer negativen Winkelangabe dreht sich die jeweils "andere" Achse von der genannten Achse weg: es entsteht eine Streckung.

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>skewX und skewY - Verzerren</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(50,50)" />
    <use xlink:href="#ks"
      transform="translate(50,50) skewX(25)" />
    <use xlink:href="#ks" transform="translate(200,50)" />
    <use xlink:href="#ks" transform="translate(200,50)
      skewY(25)" />

    <use xlink:href="#ks" transform="translate(50,200)" />
    <use xlink:href="#ks"
      transform="translate(50,200) skewY(25) skewX(25)" />
    <use xlink:href="#ks" transform="translate(200,200)" />
    <use xlink:href="#ks"
      transform="translate(200,200) skewY(-25) skewX(-25)" />

    <text x="55" y="140">skewX(25)</text>
    <text x="205" y="140">skewY(25)</text>
    <text x="55" y="290">skewX(25) skewY(25)</text>
    <text x="205" y="290">skewX(-25) skewY(-25)</text>
  </svg>
</svg>
      

Im obigen Beispiel wird unser Symbol "ks" zuerst um 25 Grad zur X-Achse gestaucht, d.h. die y-Achse dreht sich um 25 Grad auf die X-Achse zu: skewX(25), dann wird es um 25 Grad zu Y-Achse gestaucht, die x-Achse dreht sich also um 25 Grad auf die Y-Achse zu: skewY(25).

Die unteren beiden Verzerrungen zeigen eine Stauchung und eine Streckung des Objekts entlang beider Achsen.
Die Reihenfolge der Verwendung von skewX und skewY ist - für Transformationsanweisungen ungewöhnlich - nicht von Bedeutung.

Wenn Sie allerdings andere, weitere Transformationen auf ein Objekt anwenden möchten, sollten sie darauf achten, dass sich der Verlauf der Achsen geändert hat.




index  |  Kapitel 9  |  9.3  <<  | 9.4 |  >>  9.5   Transformtion der Matrix - die Anweisung matrix