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]
