SVG – Learning by Coding

[ zeichenreihenfolge.svg --> Grafik anzeigen ]

 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: <!--    AuthorDrThomas 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-familysans-serif;
23:         font-size12px;
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-width2px"/>
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-width2px">
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">HinweisSVG bietet (nochkeine 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]