SVG – Learning by Coding

[ grad_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 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:     <linearGradient id="animlingra1" x1="0" y1="0" x2="1" y2="1"
18:       spreadMethod="reflect">
19:       <stop offset="0%" style="stop-color: #000"/>
20:       <stop offset="50%" style="stop-color: #00F"/>
21:       <stop offset="100%" style="stop-color: #FFF"/>
22: 
23:       <animate attributeName="x1" attributeType="XML" begin="0s" dur="5s"
24:         from="0" to="1" repeatCount="indefinite"/>
25:       <animate attributeName="y1" attributeType="XML" begin="0s" dur="5s"
26:         from="0" to="1" repeatCount="indefinite"/>
27: 
28:       <animate attributeName="x2" attributeType="XML" begin="0s" dur="5s"
29:         from="1" to="0" repeatCount="indefinite"/>
30:       <animate attributeName="y2" attributeType="XML" begin="0s" dur="5s"
31:         from="1" to="0" repeatCount="indefinite"/>
32:     </linearGradient>
33: 
34: 
35:     <linearGradient id="animlingra2">
36:       <stop offset="0%" style="stop-color: #000">
37:         <animate attributeName="stop-color" attributeType="CSS" begin="2s" dur="20s"
38:           from="#000" to="#00F" repeatCount="indefinite"/>
39:       </stop>
40:       <stop offset="50%" style="stop-color: #00F">
41:         <animate attributeName="stop-color" attributeType="CSS" begin="2s" dur="20s"
42:           from="#00F" to="#F00" repeatCount="indefinite"/>
43:       </stop>
44:       <stop offset="100%" style="stop-color: #FFF"/>
45:     </linearGradient>
46: 
47: 
48:     <radialGradient id="animradgra1" cx="0" cy="0" fx="1" fy="1">
49:       <stop offset="0%" style="stop-color: #FFF"/>
50:       <stop offset="60%" style="stop-color: #FF9"/>
51:       <stop offset="100%" style="stop-color: #F00"/>
52: 
53:       <animate attributeName="cx" attributeType="XML" begin="0s" dur="10s"
54:         from="0" to="1" repeatCount="indefinite"/>
55:       <animate attributeName="cy" attributeType="XML" begin="0s" dur="10s"
56:         from="0" to="1" repeatCount="indefinite"/>
57: 
58:       <animate attributeName="fx" attributeType="XML" begin="0s" dur="10s"
59:         from="1" to="0" repeatCount="indefinite"/>
60:       <animate attributeName="fy" attributeType="XML" begin="0s" dur="10s"
61:         from="1" to="0" repeatCount="indefinite"/>
62:     </radialGradient>
63: 
64: 
65:     <radialGradient id="animradgra2" cx="0.5" cy="0.5" fx="0.5" fy="0.5">
66:       <stop offset="0%" style="stop-color: #FFF"/>
67:       <stop offset="60%" style="stop-color: #FF9">
68:         <animate attributeName="stop-color" attributeType="CSS" begin="2s" dur="20s"
69:           from="#FF9" to="#000" repeatCount="indefinite"/>
70:         <animate attributeName="offset" attributeType="XML" begin="2s" dur="20s"
71:           from="60%" to="100%" repeatCount="indefinite"/>
72:       </stop>
73:       <stop offset="100%" style="stop-color: #F00"/>
74:     </radialGradient>
75: 
76:   </defs>
77: 
78:   <text x="20" y="30" style="fill: #000; font-size: 24px">
79:     Animation von Gradienten</text>
80: 
81:   <rect x="20" y="60" width="400" height="40" style="fill: url(#animlingra1)"/>
82:   <rect x="20" y="130" width="400" height="40" style="fill: url(#animlingra2)"/>
83: 
84:   <circle cx="120" cy="260" r="50" style="fill: url(#animradgra1)"/>
85:   <circle cx="320" cy="260" r="50" style="fill: url(#animradgra2)"/>
86: 
87: </svg>

[zum Anfang]