SVG – Learning by Coding

[ supershapes.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 03/04 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="getSVGDoc(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,x=0,y=0,np=1000,faktor=100,xversatz=280,yversatz=180,
 22:           svgns="http://www.w3.org/2000/svg";
 23: 
 24: 			
 25:       function getSVGDoc(load_evt)
 26:       {
 27:         svgdoc=load_evt.target.ownerDocument;
 28:         svgroot=svgdoc.documentElement;
 29:       }
 30: 
 31: 
 32:       function SuperShapeEval(m,n1,n2,n3,phi)
 33:       {
 34:         var r,t1,t2,a=1,b=1;
 35: 
 36:         t1=Math.pow(Math.abs(Math.cos(m*phi/4)/a),n2);
 37:         t2=Math.pow(Math.abs(Math.sin(m*phi/4)/b),n3);
 38: 
 39:         r=Math.pow(t1+t2,1/n1);
 40:         if(Math.abs(r)==0)
 41:         {
 42:           x=0;
 43:           y=0;
 44:         }
 45:         else
 46:         {
 47:           r=1/r;
 48:           x=r*Math.cos(phi);
 49:           y=r*Math.sin(phi);
 50:         }
 51: 
 52:         x=xversatz+x*faktor;
 53:         y=yversatz+y*faktor;
 54:         return x.toString()+","+y.toString()+" ";
 55:       }
 56: 
 57: 
 58:       function SuperShapeDraw(m,n1,n2,n3,z,col)
 59:       {
 60:         var zpi,punkte="",elemobj;
 61:         zpi=z*Math.PI;
 62: 
 63:         // Polygon-Wertepaare berechnen
 64:         for(i=0;i<=np;i++)
 65:         {
 66:           phi=i*zpi/np;
 67:           punkte+=SuperShapeEval(m,n1,n2,n3,phi);
 68:         }
 69: 
 70:         // vorheriges Polygon entfernen
 71:         if(svgroot.lastChild.tagName=="polygon")
 72:           svgroot.removeChild(svgroot.lastChild);
 73: 
 74:         // neues Polygon erzeugen
 75:         elemobj=svgdoc.createElementNS(svgns,"polygon");
 76:         elemobj.setAttribute("points",punkte);
 77:         elemobj.setAttribute("stroke",col);
 78:         elemobj.setAttribute("stroke-width","1.2px");
 79:         elemobj.setAttribute("fill","none");
 80:         svgroot.appendChild(elemobj);   
 81:       }
 82: 
 83:       ]]>
 84:     </script>
 85: 
 86:   </defs>
 87: 
 88:   <text x="20" y="30" style="fill: #000; font-size: 24px">
 89:     Supershapes-Plotter</text>
 90: 
 91:   <a xlink:href="" cursor="pointer" onclick="return false">
 92:     <text x="20" y="80" style="fill: #00C; font-size: 16px"
 93:       onclick="SuperShapeDraw(5,1,1,1,2,'#FC0')">Figur 1 zeichnen
 94:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
 95:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
 96:     </text>
 97:   </a>
 98:   <text x="20" y="100" style="fill: #000; font-size: 12px">
 99:     m=5n1=n2=n3=12&#960;</text>
100: 
101:   <a xlink:href="" cursor="pointer" onclick="return false">
102:     <text x="20" y="130" style="fill: #00C; font-size: 16px"
103:       onclick="SuperShapeDraw(5,0.1,1.7,1.7,2,'#F00')">Figur 2 zeichnen
104:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
105:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
106:     </text>
107:   </a>
108:   <text x="20" y="150" style="fill: #000; font-size: 12px">
109:     m=5n1=0.1n2=n3=1.72&#960;</text>
110: 
111:   <a xlink:href="" cursor="pointer" onclick="return false">
112:     <text x="20" y="180" style="fill: #00C; font-size: 16px"
113:       onclick="SuperShapeDraw(6,0.3,0.3,0.3,2,'#090')">Figur 3 zeichnen
114:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
115:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
116:     </text>
117:   </a>
118:   <text x="20" y="200" style="fill: #000; font-size: 12px">
119:     m=6n1=n2=n3=0.32&#960;</text>
120: 
121:   <a xlink:href="" cursor="pointer" onclick="return false">
122:     <text x="20" y="230" style="fill: #00C; font-size: 16px"
123:       onclick="SuperShapeDraw(1/6,0.3,0.3,0.3,12,'#00C')">Figur 4 zeichnen
124:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
125:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
126:     </text>
127:   </a>
128:   <text x="20" y="250" style="fill: #000; font-size: 12px">
129:     m=1/6n1=n2=n3=0.312&#960;</text>
130: 
131:   <a xlink:href="" cursor="pointer" onclick="return false">
132:     <text x="20" y="280" style="fill: #00C; font-size: 16px"
133:       onclick="SuperShapeDraw(19/6,0.3,0.3,0.3,12,'#000')">Figur 5 zeichnen
134:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
135:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
136:     </text>
137:   </a>
138:   <text x="20" y="300" style="fill: #000; font-size: 12px">
139:     m=19/6n1=n2=n3=0.312&#960;</text>
140: 
141:   <a xlink:href="http://paulbourke.net/geometry/supershape/" target="_top">
142:     <text x="20" y="350" style="fill: #00C; font-size: 12px">
143:       Code adapted from Paul Bourke
144:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
145:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
146:     </text>
147:   </a>
148: 
149: </svg>

[zum Anfang]