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: <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]
