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 04/05 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="Init(evt)">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <script type="text/javascript">
19: <![CDATA[
20:
21: var svgdoc,svgroot;
22:
23:
24: function Init(load_evt)
25: {
26: svgdoc=load_evt.target.ownerDocument;
27: svgroot=svgdoc.rootElement;
28:
29: Kreisdiagramm(380,170,100,[10,60,30],["red","yellow","blue"]);
30:
31: /* Ergebnis:
32: <path d="..." fill="..."/> mit
33: d="M380,170 L380.00,70.00 A100,100 0 0,1 438.78,89.10 Z" fill="red"
34: d="M380,170 L438.78,89.10 A100,100 0 1,1 284.89,200.90 Z" fill="yellow"
35: d="M380,170 L284.89,200.90 A100,100 0 0,1 380.00,70.00 Z" fill="blue"
36: */
37: }
38:
39:
40: function Kreisdiagramm(cx,cy,r,daten,farben)
41: {
42: var datanz,arcflags,winkel,aktwinkel,punkte,d,fill,pfad,i,j,
43: svgns="http://www.w3.org/2000/svg";
44:
45: datanz=daten.length;
46:
47: winkel=new Array(datanz+1);
48: winkel[0]=0;
49: for(i=1;i<datanz+1;i++)winkel[i]=daten[i-1]/100*360;
50:
51: punkte=new Array(datanz+1);
52: for(i=0;i<datanz+1;i++)
53: {
54: aktwinkel=0;
55: for(j=0;j<=i;j++)aktwinkel+=winkel[j];
56: punkte[i]=new Object();
57: aktwinkel=aktwinkel*2*Math.PI/360;
58: punkte[i].x=(cx+Math.sin(aktwinkel)*r).toFixed(2);
59: punkte[i].y=(cy-Math.cos(aktwinkel)*r).toFixed(2);
60: }
61:
62: for(i=0;i<datanz;i++)
63: {
64: arcflags=(winkel[i+1]<=180) ? "0,1" : "1,1";
65: d="M"+cx+","+cy+" L"+punkte[i].x+","+punkte[i].y+" A"+r+","+r+
66: " 0 "+arcflags+" "+punkte[i+1].x+","+punkte[i+1].y+" Z";
67: fill=farben[i];
68:
69: pfad=svgdoc.createElementNS(svgns,"path");
70: pfad.setAttribute("d",d);
71: pfad.setAttribute("fill",fill);
72: svgroot.appendChild(pfad);
73: }
74: }
75:
76: ]]>
77: </script>
78:
79: </defs>
80:
81: <text x="20" y="30" style="fill: #000; font-size: 24px">
82: Kreissegmente zeichnen / berechnen</text>
83:
84: <circle cx="130" cy="170" r="100" style="fill: none; stroke: #000"/>
85: <line x1="130" y1="170" x2="130" y2="70" style="stroke: #999"/>
86: <line x1="130" y1="170" x2="188.78" y2="89.10" style="stroke: #00C"/>
87: <line x1="130" y1="89.10" x2="188.78" y2="89.10" style="stroke: #00C"/>
88: <line x1="130" y1="170" x2="130" y2="89.10" style="stroke: #00C"/>
89:
90: <path d="M130,170 L130,70 A100,100 0 0,1 188.78,89.10 Z"
91: style="fill: #F00; opacity: 0.05"/>
92: <path d="M130,70 A100,100 0 0,1 188.78 89.10"
93: style="fill: none; stroke: #F00; stroke-width: 2px"/>
94: <path d="M130,150 A10,10 0 0,1 143,153"
95: style="fill: none; stroke: #00C; stroke-width: 2px"/>
96:
97: <circle cx="130" cy="170" r="2" style="fill: #00C"/>
98: <circle cx="130" cy="70" r="2" style="fill: #00C"/>
99: <circle cx="188.78" cy="89.10" r="2" style="fill: #F00"/>
100: <circle cx="130" cy="89.10" r="2" style="fill: #090"/>
101:
102: <g style="font-family: monospace; font-weight: bold; font-size: 12px">
103: <text x="112" y="181" style="fill: #00C">cx,cy</text>
104: <text x="112" y="61" style="fill: #00C">x1,y1</text>
105: <text x="195" y="90" style="fill: #F00">x2,y2</text>
106: <text x="160" y="138" style="fill: #00C">r</text>
107: <text x="148" y="85" style="fill: #00C">Δx</text>
108: <text x="112" y="130" style="fill: #00C">Δy</text>
109: <text x="131" y="159" style="fill: #00C">α</text>
110: </g>
111:
112: <g style="font-family: monospace; font-weight: bold; font-size: 16px">
113: <text x="30" y="310" style="fill: #F00">
114: x2 = cx + Δx = cx + r · sin α</text>
115: <text x="30" y="325" style="fill: #F00">
116: y2 = cy − Δy = cy − r · cos α</text>
117: <text x="30" y="360" style="fill: #000">
118: Kreissegment <= 180°</text>
119: <text x="30" y="375" style="fill: #00C">
120: <path d="Mcx,cy Lx1,y1 Ar,r 0 0,1 x2,y2 Z" ... /></text>
121: <text x="30" y="400" style="fill: #000">
122: Kreissegment > 180°</text>
123: <text x="30" y="415" style="fill: #00C">
124: <path d="Mcx,cy Lx1,y1 Ar,r 0 1,1 x2,y2 Z" ... /></text>
125: </g>
126:
127: <a xlink:href="../?doc=piechart&znr=on" target="_top">
128: <text x="30" y="450" style="font-size: 12px; fill: #000">
129: [siehe Beispiel Kreis-Diagramm]
130: <set attributeName="fill" attributeType="CSS" to="#F00"
131: begin="mouseover" end="mouseout"/>
132: <set attributeName="text-decoration" attributeType="CSS"
133: to="underline" begin="mouseover" end="mouseout"/>
134: </text>
135: </a>
136:
137: </svg>
[zum Anfang]