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 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-size: 12px;
24: font-family: sans-serif;
25: fill: #000;
26: }
27:
28: .head
29: {
30: font-size: 24px;
31: }
32:
33: .formel
34: {
35: font-size: 20px;
36: }
37:
38: .atext
39: {
40: font-weight: bold;
41: }
42:
43: .raster
44: {
45: fill: none;
46: stroke: #CCC;
47: stroke-dasharray: 0.5,49.5;
48: stroke-width: 500px;
49: }
50:
51: .achsen
52: {
53: stroke: #000;
54: stroke-width: 1px;
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² + (y - ∛x²)² = 1 | y = ±√(1 - x²) + ∛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]
