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 03/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:
15: <defs>
16:
17: <style type="text/css">
18: <![CDATA[
19:
20: *
21: {
22: font-family: sans-serif;
23: font-size: 12px;
24: }
25:
26: ]]>
27: </style>
28:
29: </defs>
30:
31: <text x="20" y="30" style="fill: #000; font-size: 24px">
32: Zeichenreihenfolge der Objekte (z-index ???)</text>
33:
34: <!-- Smiley|Beginn -->
35:
36: <!-- gelber Vollkreis mit schwarzem Rand -->
37: <circle cx="100" cy="100" r="40" style="fill: #FF0; stroke: #000;
38: stroke-width: 2px"/>
39:
40: <!-- zwei weiße Ellipsen mit schwarzem Rand fuer die Augen -->
41: <ellipse cx="85" cy="90" rx="5" ry="10" style="fill: #FFF;
42: stroke: #000; stroke-width: 2px"/>
43: <ellipse cx="115" cy="90" rx="5" ry="10" style="fill: #FFF;
44: stroke: #000; stroke-width: 2px"/>
45:
46: <!-- zwei schwarz gefuellte Kreise fuer die Pupillen -->
47: <circle cx="87" cy="95" r="3" style="fill: #000"/>
48: <circle cx="113" cy="95" r="3" style="fill: #000"/>
49:
50: <!-- schwarzes Rechteck mit abgerundetem Rand als Nase -->
51: <rect x="100" y="102" height="5" width="1" style="fill: #000;
52: stroke: #000; stroke-width: 5px; stroke-linejoin: round"/>
53:
54: <!-- Pfad fuer den roten Mund mit Animation -->
55: <path d="M 85,130 A 5,5 0 1,1 115,130" style="fill: #FF0; stroke: #F00;
56: stroke-width: 2px">
57: <animate attributeName="d" attributeType="XML" begin="0s" dur="10s" fill="freeze"
58: from="M 85,130 A 5,5 0 1,1 115,130" to="M 85,110 A 5,5 0 1,0 115,110"/>
59: </path>
60:
61: <!-- Smiley|Ende -->
62:
63: <text x="30" y="180">Hinweis: SVG bietet (noch) keine Eigenschaft z-index.</text>
64: <text x="30" y="200">Nach dem "painters model" werden die Objekte
65: in der Reihenfolge ihrer Definition gezeichnet.</text>
66:
67: <a xlink:href="../?doc=objekte_top" target="_top">
68: <text x="30" y="220" style="fill: #F00">
69: <tspan style="fill: #00C">[ </tspan>
70: Siehe Beispiel zur Änderung der Objektabfolge mittels DOM-Scripting
71: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/>
72: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/>
73: <tspan style="fill: #00C"> ]</tspan>
74: </text>
75: </a>
76:
77: </svg>
[zum Anfang]
