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 12/02 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11:
12: <defs>
13: <filter id="flt">
14: <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/>
15: <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5"
16: specularExponent="10" result="specOut" style="lighting-color: #FFF">
17: <fePointLight x="-5000" y="-5000" z="5000"/>
18: </feSpecularLighting>
19: <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
20: <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic"
21: k1="0" k2="1" k3="1" k4="0"/>
22: </filter>
23: </defs>
24:
25: <title>SVG - Learning by Coding</title>
26: <desc>SVG-Spezifikation in Beispielen</desc>
27: <text x="20" y="30" style="fill: #000; font-size: 24px">Balken-Diagramm</text>
28:
29: <rect x="100" y="80" width="139" height="15" style="fill: #FFC; filter: url(#flt)">
30: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="139"/>
31: </rect>
32: <text x="50" y="91" style="font-size: 12px; text-anchor: right">Text 1</text>
33: <text x="249" y="91" style="font-size: 12px; text-anchor: right; visibility: hidden">[17.39%]
34: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/>
35: </text>
36: <rect x="100" y="102" width="204" height="15" style="fill: #F00; filter: url(#flt)">
37: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="104"/>
38: </rect>
39: <text x="50" y="113" style="font-size: 12px; text-anchor: right">Text 2</text>
40: <text x="214" y="113" style="font-size: 12px; text-anchor: right; visibility: hidden">[13.04%]
41: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/>
42: </text>
43: <rect x="100" y="125" width="208" height="15" style="fill: #090; filter: url(#flt)">
44: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="208"/>
45: </rect>
46: <text x="50" y="136" style="font-size: 12px; text-anchor: right">Text 3</text>
47: <text x="318" y="136" style="font-size: 12px; text-anchor: right; visibility: hidden">[26.09%]
48: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/>
49: </text>
50: <rect x="100" y="147" width="278" height="15" style="fill: #00C; filter: url(#flt)">
51: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="278"/>
52: </rect>
53: <text x="50" y="158" style="font-size: 12px; text-anchor: right">Text 4</text>
54: <text x="388" y="158" style="font-size: 12px; text-anchor: right; visibility: hidden">[34.78%]
55: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/>
56: </text>
57: <rect x="100" y="170" width="69" height="15" style="fill: #000; filter: url(#flt)">
58: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="69"/>
59: </rect>
60: <text x="50" y="181" style="font-size: 12px; text-anchor: right">Text 5</text>
61: <text x="179" y="181" style="font-size: 12px; text-anchor: right; visibility: hidden">[8.70%]
62: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/>
63: </text>
64:
65: <a xlink:href="http://www.datenverdrahten.de/svgphp/" target="_top">
66: <text x="30" y="250" style="font-size: 12px; fill: #00C">[Siehe SVG::PHP – Generierung von Kreis- und Balkendiagrammen]
67: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
68: <set attributeName="text-decoration" attributeType="CSS" to="underline" begin="mouseover"/>
69: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
70: <set attributeName="text-decoration" attributeType="CSS" to="none" begin="mouseout"/>
71: </text>
72: </a>
73:
74: </svg>
[zum Anfang]
