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

SVG Tutorial

  svg tutorial index  |  Kapitel 9   

9.1 Verschieben - die Anweisung translate

Sie können ein Objekt verschieben, wenn Sie dem Attribut transform als Wert die Anweisung translate mit Längenangaben zur Verschiebung entlang der Achse(n) zuweisen.

Die Längenangabe(n) werden in runden Klammern direkt nach der Anweisung translate gesetzt.
Es sind maximal 2 Angaben (Verschiebung der x- und der y-Achse), durch Komma getrennt, möglich.
Wenn Sie nur eine Längenangabe verwenden, wird diese als Verschiebungslänge entlang der x-Achse interpretiert.

Beachten Sie, dass bei Transformationen immer das gesamte temporäre Koordinatensystem transformiert wird.
Der Verlauf und die Skalierung (Größe) der x- und/oder y-Achse kann also, je nach vorangegangener Transformationsanweisung, auch vom "normalen" Verlauf abweichen.

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>translate - Verschieben</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" />
    <use xlink:href="#ks" transform="translate(150)" />
    <use xlink:href="#ks" transform="translate(0,150)" />
    <use xlink:href="#ks" transform="translate(150,150)" />

    <text x="10" y="70">keine Verschiebung</text>
    <text x="160" y="70">150 px nur x-Achse
      <tspan x="160" y="85">translate(150)</tspan>
    </text>
    <text x="10" y="220">150 px nur y-Achse
      <tspan x="10" y="235">translate(0,150)</tspan>
    </text>
    <text x="160" y="220">150 px in beide Richtungen
      <tspan x="160" y="235">translate(150,150)</tspan>
    </text>
  </svg>
</svg>
      

Im obigen Beispiel wird - das bereits bekannte - Symbol "ks" verschoben:
zuerst nur entlang der x-Achse: translate(150),
dann nur entlang der y-Achse: translate(0,150)
und zuletzt in beide Richtungen: translate(150,150).




index  |  Kapitel 9  <<  | 9.1 |  >>  9.2   Skalieren - die Anweisung scale