SVG – Learning by Coding
1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
4: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
5: ]>
6:
7: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
8: <!-- Author: Dr. Thomas Meinike 02/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11:
12: <title>SVG - Learning by Coding</title>
13: <desc>SVG-Spezifikation in Beispielen</desc>
14: <text x="20" y="30" style="fill: #000; font-size: 24px">
15: Transformationen mit matrix(a,b,c,d,e,f)
16: </text>
17:
18: <rect transform="matrix(1,0,0,1,270,100)" x="50" y="80" width="150" height="75"
19: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
20: <!-- entspricht translate(270,100) -->
21:
22: <rect transform="matrix(0,1,-1,0,370,230)" x="50" y="80" width="150" height="75"
23: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
24: <!-- entspricht rotate(90,70,300) -->
25:
26: <rect transform="matrix(0.75,0,0,0.5,0,0)" x="50" y="80" width="150" height="75"
27: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
28: <!-- entspricht scale(0.75,0.5) -->
29:
30: <rect transform="matrix(1,0,0.5773502692,1,0,0)" x="50" y="100" width="150" height="75"
31: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
32: <!-- entspricht skewX(30) -->
33:
34: <rect transform="matrix(1,1,0,1,0,0)" x="50" y="80" width="150" height="75"
35: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
36: <!-- entspricht skewY(45) -->
37:
38: <text x="200" y="55">Die Geometrie der Objekte entspricht dem Beispiel</text>
39: <a xlink:href="../?doc=transform&znr=on" target="_top">
40: <text x="475" y="55" style="fill: #00C">
41: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
42: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
43: transform.svg<tspan style="fill: #00C">.</tspan>
44: </text>
45: </a>
46: <a xlink:href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined" target="_top">
47: <text x="200" y="75" style="fill: #00C">[<tspan>Details in der SVG-Spezifikation
48: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
49: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/></tspan>
50: </text>
51: </a>
52: <a xlink:href="http://www.datenverdrahten.de/svglbc/matrixcalc.htm" target="_top">
53: <text x="390" y="75" style="fill: #F00">
54: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/>
55: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/>
56: Berechnungen mit MatrixCalc<tspan style="fill: #00C">]</tspan>
57: </text>
58: </a>
59:
60: </svg>
[zum Anfang]
