SVG – Learning by Coding

[ polygon_area.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 11/03 thomas@handmadecode.de     -->
 9: 
10: 
11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
12:   zoomAndPan="disable">
13: 
14:   <title>SVG Learning By Coding</title>
15:   <desc>SVG-Spezifikation in Beispielen</desc>
16: 
17:   <defs>
18: 
19:     <style type="text/css">
20:       <![CDATA[
21: 
22:       polygon
23:       {
24:         fill#FFF;
25:         stroke#00C;
26:       }
27: 
28:       ]]>
29:     </style>
30: 
31: 
32:     <script type="text/javascript">
33:       <![CDATA[
34: 
35:       function PolygonArea(click_evt)
36:       {
37:         // Flaecheninhalt eines Polygons
38:         var points,p_arr,n=0,area=0;
39: 
40:         points=click_evt.target.getAttribute("points");
41:         points=points.replace(/s/g,",");
42:         p_arr=points.split(",");
43:         n=p_arr.length;
44: 
45:         for(i=0;i<n-2;i+=2)area+=Det(p_arr[i],p_arr[i+2],p_arr[i+1],p_arr[i+3]);
46:         area+=Det(p_arr[n-2],p_arr[0],p_arr[n-1],p_arr[1]);
47: 
48:         return Math.abs(area/2);
49:       }
50: 
51: 
52:       function Det(a11,a12,a21,a22)
53:       {
54:         // Determinate einer quadratischen Matrix
55:         return a11*a22-a12*a21;
56:       }
57: 
58:       ]]>
59:     </script>
60: 
61:   </defs>
62: 
63:   <text x="30" y="30" style="fill: #000; font-size: 24px">
64:     Polygonfläche berechnen
65:   </text>
66: 
67:   <polygon points="79,72 45,55 45,89" onclick="alert(PolygonArea(evt)+' px^2')"/>
68:   <polygon points="158,70 129,52 100,70 129,87" onclick="alert(PolygonArea(evt)+' px^2')"/>
69:   <polygon points="222,71 206,52 179,60 179,82 206,90" onclick="alert(PolygonArea(evt)+' px^2')"/>
70:   <polygon points="284,71 273,88 252,88 241,71 252,53 273,53" onclick="alert(PolygonArea(evt)+' px^2')"/>
71:   <text x="110" y="120">Objekte anklicken!</text>
72: 
73: </svg>

[zum Anfang]