JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 447

Canvas -Konzept sofort verstehen können. Verändert werden können zum Beispiel Füllung,
Konturlinie und Transparenz der Elemente sowie bei Text die Eigenschaten der Schrit. Die
Styling-Eigenschaten richten sich dabei in weiten Teilen nach XSL und CSS. Über zusätzliche
Elemente können nicht nur Farben, sondern auch Farbverläufe und Muster verwendet werden.
Listing 14.58■ Ein Beispiel für eine SVG-Datei - graik1.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" baseProile="full"
width="700px" height="400px" viewBox="0 0 700 400">
<!-- Eine Line -->
<line x1="0" y1="200" x2="700" y2="200" stroke="black" stroke-width="10px"/>
<!-- Ein Rechteck -->
<rect x="100" y="100" width="500" height="200"
ill="blue" stroke="black" stroke-width="10px"/>
<!-- Eine weitere Line -->
<line x1="180" y1="370" x2="500" y2="50" stroke="black" stroke-width="10px"/>
<!-- Ein Kreis -->
<circle cx="150" cy="75" r="80" stroke="red" ill="green" stroke-width="5px"/>
</svg>
Bild 14.30■
Eine SVG-Graik
14.5.2.7■Transformationen
Jedes Element und jede Gruppe von Elementen kann in SVG durch eine Reihe ainer Trans-
formationen in Position, Orientierung und Form verändert werden. Die Transformation
wird einem beliebigen Element als Attribut transform angehängt.
Listing 14.59■ Verwendung einer Transformation
<rect x="100" y="100" width="500" height="200" ill="blue" stroke="black"
stroke-width="10px" transform="rotate(15 525 25)" />
Bild 14.31■
Das Rechteck wurde rotiert.