SVG – Learning by Coding

[ kreissegmente.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 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">&#916;x</text>
108:     <text x="112" y="130" style="fill: #00C">&#916;y</text>
109:     <text x="131" y="159" style="fill: #00C">&#945;</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 + &#916;x = cx + r &#183; sin &#945;</text>
115:     <text x="30" y="325" style="fill: #F00">
116:       y2 cy &#8722; &#916;y = cy &#8722; r &#183; cos &#945;</text>
117:     <text x="30" y="360" style="fill: #000">
118:       Kreissegment &lt;180°</text>
119:     <text x="30" y="375" style="fill: #00C">
120:       &lt;path d="Mcx,cy Lx1,y1 Ar,r 0 0,1 x2,y2 Z" ... /&gt;</text>
121:     <text x="30" y="400" style="fill: #000">
122:       Kreissegment &gt; 180°</text>
123:     <text x="30" y="415" style="fill: #00C">
124:       &lt;path d="Mcx,cy Lx1,y1 Ar,r 0 1,1 x2,y2 Z" ... /&gt;</text>
125:   </g>
126: 
127:   <a xlink:href="../?doc=piechart&amp;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]