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: 14:
<style type="text/css">
15:
<![CDATA[
16: 17:
path
18:
{
19:
stroke: #FFF;
20:
stroke-width: 0.5px;
21:
}
22: 23:
]]>
24:
</style>
25: 26: 27:
<script type="text/javascript">
28:
<![CDATA[
29: 30:
var svgdoc,obj;
31: 32: 33:
function OpacityDown(mouseover_evt)
34:
{
35:
obj=mouseover_evt.target.parentNode;
36:
obj.style.setProperty("opacity","0.5","");
37:
}
38: 39: 40:
function OpacityUp(mouseout_evt)
41:
{
42:
obj=mouseout_evt.target.parentNode;
43:
obj.style.setProperty("opacity","1.0","");
44:
}
45: 46:
]]>
47:
</script>
48: 49:
</defs>
50: 51:
<title>SVG - Learning by Coding</title>
52:
<desc>SVG-Spezifikation in Beispielen</desc>
53:
<text x="20" y="30" style="fill: #000; font-size: 24px">Kreis-Diagramm</text>
54: 55:
<g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)">
56:
<path d="M 200,200 L 200,100 A 100,100 0 0,1 289,154 Z" style="fill: #FFC"/>
57:
<rect x="350" y="100" width="30" height="12" style="fill: #FFC"/>
58:
<text x="390" y="110" style="font-size: 12px; text-anchor: right">Text 1 [17.39%]</text>
59:
</g>
60: 61:
<g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)">
62:
<path d="M 200,200 L 289,154 A 100,100 0 0,1 294,233 Z" style="fill: #F00"/>
63:
<rect x="350" y="120" width="30" height="12" style="fill: #F00"/>
64:
<text x="390" y="130" style="font-size: 12px; text-anchor: right">Text 2 [13.04%]</text>
65:
</g>
66: 67:
<g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)">
68:
<path d="M 200,200 L 294,233 A 100,100 0 0,1 160,292 Z" style="fill: #090"/>
69:
<rect x="350" y="140" width="30" height="12" style="fill: #090"/>
70:
<text x="390" y="150" style="font-size: 12px; text-anchor: right">Text 3 [26.09%]</text>
71:
</g>
72: 73:
<g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)">
74:
<path d="M 200,200 L 160,292 A 100,100 0 0,1 148,115 Z" style="fill: #00C"/>
75:
<rect x="350" y="160" width="30" height="12" style="fill: #00C"/>
76:
<text x="390" y="170" style="font-size: 12px; text-anchor: right">Text 4 [34.78%]</text>
77:
</g>
78: 79:
<g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)">
80:
<path d="M 200,200 L 148,115 A 100,100 0 0,1 200,100 Z" style="fill: #000"/>
81:
<rect x="350" y="180" width="30" height="12" style="fill: #000"/>
82:
<text x="390" y="190" style="font-size: 12px; text-anchor: right">Text 5 [8.70%]</text>
83:
</g>
84: 85:
<a xlink:href="http://www.datenverdrahten.de/svgphp/" target="_top">
86:
<text x="30" y="360" style="font-size: 12px; fill: #00C">[Siehe SVG::PHP – Generierung von Kreis- und Balkendiagrammen]
87:
<set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
88:
<set attributeName="text-decoration" attributeType="CSS" to="underline" begin="mouseover"/>
89:
<set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
90:
<set attributeName="text-decoration" attributeType="CSS" to="none" begin="mouseout"/>
91:
</text>
92:
</a>
93: 94:
</svg>
[zum Anfang]
