SVG – Learning by Coding

[ love_formula.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 09/14 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:   <style type="text/css">
 19:     <![CDATA[
 20: 
 21:     text
 22:     {
 23:       font-size12px;
 24:       font-familysans-serif;
 25:       fill#000;
 26:     }
 27: 
 28:     .head
 29:     {
 30:       font-size24px;
 31:     }
 32: 
 33:     .formel
 34:     {
 35:       font-size20px;
 36:     }
 37: 
 38:     .atext
 39:     {
 40:       font-weightbold;
 41:     }
 42: 
 43:     .raster
 44:     {
 45:       fillnone;
 46:       stroke#CCC;
 47:       stroke-dasharray0.5,49.5;
 48:       stroke-width500px;
 49:     }
 50: 
 51:     .achsen
 52:     {
 53:       stroke#000;
 54:       stroke-width1px;
 55:     }
 56: 
 57:     ]]>
 58:   </style>
 59: 
 60:   <script type="text/javascript">
 61:     <![CDATA[
 62: 
 63:     var svgdoc,svgroot;
 64:     var svgns="http://www.w3.org/2000/svg";
 65:     var x0=270,y0=300// Koordinaten-Ursprung (0,0)
 66:     var gi=100// Gitter-Schrittweite pro Einheit
 67: 
 68:     function Init(load_evt)
 69:     {
 70:       var f// Funktionsobjekt
 71: 
 72:       svgdoc=load_evt.target.ownerDocument;
 73:       svgroot=svgdoc.rootElement;
 74: 
 75:       f=function(x){return Math.sqrt(1-x*x)+Math.pow(x*x,1/3);};
 76:       FktZeichnen(f,-1,1);
 77:       f=function(x){return -Math.sqrt(1-x*x)+Math.pow(x*x,1/3);};
 78:       FktZeichnen(f,-1,1);
 79:     }
 80: 
 81:     function FktZeichnen(f,von,bis)
 82:     {
 83:       var x,y,i,di=0.0005,points="",pl;
 84:  
 85:       for(i=von;i<=bis;i+=di)
 86:       {
 87:         x=i;
 88:         y=f(x);
 89:         x=x0+x*gi;
 90:         y=y0-y*gi;
 91:         points+=x+","+y+" ";
 92:       }
 93: 
 94:       pl=svgdoc.createElementNS(svgns,"polyline");
 95:       pl.setAttribute("points",points);
 96:       pl.setAttribute("stroke","#F00");
 97:       pl.setAttribute("stroke-width","1px");
 98:       pl.setAttribute("fill","none");
 99: 
100:       svgroot.appendChild(pl);
101:     }
102: 
103:     ]]>
104:   </script>
105: 
106:   </defs>
107: 
108:   <text class="head" x="20" y="30">Love Formula: <tspan class="formel">
109:     x² + (- &#x221B;x²)² = 1 | y = ±&#x221A;(1 - x²) + &#x221B;x²</tspan>
110:   </text>
111: 
112:   <!-- Raster -->
113:   <line class="raster" x1="20" y1="300" x2="521" y2="300"/>
114:   <line class="raster" x1="270" y1="49.5" x2="270" y2="550"/>
115: 
116:   <!-- Achsen -->
117:   <line class="achsen" x1="20" y1="300" x2="520" y2="300"/>
118:   <line class="achsen" x1="270" y1="49.5" x2="270" y2="550"/>
119: 
120:   <!-- Achsen-Pfeilspitzen -->
121:   <polygon points="267,59 270,49 273,59"/>
122:   <polygon points="511,297 521,300 511,303"/>
123: 
124:   <!-- Achsen-Beschriftung x -->
125:   <text x="58" y="313">-2.0</text>
126:   <text x="108" y="313">-1.5</text>
127:   <text x="158" y="313">-1.0</text>
128:   <text x="208" y="313">-0.5</text>
129:   <text x="260" y="313">0</text>
130:   <text x="312" y="313">0.5</text>
131:   <text x="362" y="313">1.0</text>
132:   <text x="412" y="313">1.5</text>
133:   <text x="462" y="313">2.0</text>
134:   <text class="atext" x="512" y="313">x</text>
135: 
136:   <!-- Achsen-Beschriftung y -->
137:   <text x="250" y="103">2.0</text>
138:   <text x="250" y="153">1.5</text>
139:   <text x="250" y="203">1.0</text>
140:   <text x="250" y="253">0.5</text>
141:   <text x="247" y="353">-0.5</text>
142:   <text x="247" y="403">-1.0</text>
143:   <text x="247" y="453">-1.5</text>
144:   <text x="247" y="503">-2.0</text>
145:   <text class="atext" x="257" y="60">y</text>
146: 
147: </svg>

[zum Anfang]