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 07/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: <style type="text/css">
19: <![CDATA[
20:
21: *
22: {
23: font-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: ]]>
28: </style>
29:
30:
31: <script type="text/javascript">
32: <![CDATA[
33:
34: var svgdoc,box,laenge,zx,zy,zfarbe;
35:
36:
37: function getSVGDoc(load_evt)
38: {
39: svgdoc=load_evt.target.ownerDocument;
40: box=svgdoc.getElementById("box");
41: }
42:
43:
44: function CloneObj(click_evt,param)
45: {
46: var knoten;
47:
48: knoten=click_evt.target.cloneNode(param);
49: /*
50: param:
51: false = nur den aktuellen Knoten klonen (Kreis)
52: true = Knoten mit allen Kindknoten klonen (Rechteck)
53: */
54:
55: Zufallsdaten();
56:
57: if(knoten.tagName=="circle")
58: {
59: knoten.setAttribute("cx",zx);
60: knoten.setAttribute("cy",zy);
61: knoten.setAttribute("r",laenge/2);
62: }
63: else if(knoten.tagName=="rect")
64: {
65: knoten.setAttribute("x",zx);
66: knoten.setAttribute("y",zy);
67: knoten.setAttribute("width",laenge);
68: knoten.setAttribute("height",laenge);
69: }
70:
71: knoten.setAttribute("fill",Zufallsfarbe());
72: knoten.setAttribute("stroke",Zufallsfarbe());
73: knoten.removeAttribute("onclick");
74: box.appendChild(knoten);
75: }
76:
77:
78: function Zufallsdaten()
79: {
80: var vonx,vony,bisx,bisy;
81:
82: laenge=Math.round(5+45*Math.random());
83: vonx=50+(laenge/2);
84: vony=150+(laenge/2);
85: bisx=500;
86: bisy=400;
87:
88: zx=Math.floor(vonx+(bisx-vonx+1)*Math.random());
89: zy=Math.floor(vony+(bisy-vony+1)*Math.random());
90: }
91:
92:
93: function Zufallsfarbe()
94: {
95: var r,g,b,rgb;
96:
97: r=Math.floor(Math.random()*256);
98: g=Math.floor(Math.random()*256);
99: b=Math.floor(Math.random()*256);
100: rgb="rgb("+r+","+g+","+b+")";
101:
102: return rgb;
103: }
104:
105: ]]>
106: </script>
107:
108: </defs>
109:
110: <text x="20" y="30" style="fill: #000; font-size: 24px">
111: Grafikobjekte mit Methode cloneNode() erzeugen</text>
112:
113: <circle id="kr" cx="30" cy="70" r="10" fill="#FC0"
114: onclick="CloneObj(evt,false)"><!-- Kreis allein klonen -->
115: <set attributeName="opacity" attributeType="XML" to="0.4" begin="mouseover"/>
116: <set attributeName="opacity" attributeType="XML" to="1.0" begin="mouseout"/>
117: <set attributeName="opacity" attributeType="XML" to="1.0" begin="click"/>
118: </circle>
119:
120: <rect id="re" x="60" y="60" width="20" height="20" fill="#00C"
121: onclick="CloneObj(evt,true)"><!-- Rechteck mit set-Kindelementen klonen -->
122: <set attributeName="opacity" attributeType="XML" to="0.4" begin="mouseover"/>
123: <set attributeName="opacity" attributeType="XML" to="1.0" begin="mouseout"/>
124: <set attributeName="opacity" attributeType="XML" to="1.0" begin="click"/>
125: </rect>
126:
127: <text x="20" y="110" fill="#000">Kreis oder Rechteck anklicken!
128: <tspan fill="#F00">
129: Der Kreis wird allein, das Rechteck mit set-Kindelementen geklont.
130: </tspan>
131: </text>
132:
133: <g id="box">
134: <rect x="20" y="130" width="520" height="320" fill="none" stroke="#999"/>
135: </g>
136:
137: </svg>
[zum Anfang]
