SVG – Learning by Coding

[ viewBox_animation.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 08/04 thomas@handmadecode.de     -->
 9: 
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11:   width="500" height="500" viewBox="0 0 500 500" zoomAndPan="disable">
12: 
13:   <animate attributeName="viewBox" attributeType="XML" begin="smiley.click" dur="10s"
14:     values="0 0 500 500; 250 250 0 0; 0 0 500 500" repeatCount="3" fill="freeze"/>
15: 
16:   <title>SVG Learning By Coding</title>
17:   <desc>SVG-Spezifikation in Beispielen</desc>
18: 
19:   <text x="20" y="30" style="fill: #000; font-size: 24px">
20:     viewBox-Animation</text>
21:   <text x="20" y="50" style="fill: #F00; font-size: 12px">
22:     [Smiley anclicken 3 Wiederholungen]</text>
23: 
24:   <g id="smiley">
25:   
26:     <!-- Smiley|Beginn -->
27:  
28:     <!-- gelber Vollkreis mit schwarzem Rand -->
29:     <circle cx="250" cy="250" r="40" style="fill: #FF0; stroke: #000;
30:       stroke-width2px"/>
31: 
32:     <!-- zwei weiße Ellipsen mit schwarzem Rand fuer die Augen -->
33:     <ellipse cx="235" cy="240" rx="5" ry="10" style="fill: #FFF;
34:       stroke#000; stroke-width: 2px"/>
35:     <ellipse cx="265" cy="240" rx="5" ry="10" style="fill: #FFF;
36:       stroke#000; stroke-width: 2px"/>
37: 
38:     <!-- zwei schwarz gefuellte Kreise fuer die Pupillen -->
39:     <circle cx="237" cy="245" r="3" style="fill: #000"/>
40:     <circle cx="263" cy="245" r="3" style="fill: #000"/>
41: 
42:     <!-- schwarzes Rechteck mit abgerundetem Rand als Nase -->
43:     <rect x="250" y="252" height="5" width="1" style="fill: #000;
44:       stroke#000; stroke-width: 5px; stroke-linejoin: round"/>
45: 
46:     <!-- Pfad fuer den roten Mund -->
47:     <path d="M 235,260 A 5,5 0 1,0 265,260" style="fill: #FF0; stroke: #F00;
48:       stroke-width2px"/>
49: 
50:     <!-- Smiley|Ende -->
51: 
52:   </g>
53: 
54: </svg>

[zum Anfang]