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 02/05 - 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:
*
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,r1,r2,styleattr;
35: 36: 37:
function Init(load_evt)
38:
{
39:
// Objekt-Variablen initialisieren
40:
svgdoc=load_evt.target.ownerDocument;
41:
r1=svgdoc.getElementById("r1");
42:
r2=svgdoc.getElementById("r2");
43: 44:
// style-Attribut fuer linkes Rechteck (r1) dynamisch erzeugen
45:
styleattr=svgdoc.createAttribute("style");
46:
styleattr.nodeValue="fill: #FF0; stroke: #00C; opacity: 0.8";
47:
r1.setAttributeNode(styleattr);
48:
}
49: 50: 51:
function GRSAttrNode(click_evt)
52:
{
53:
// style-Attribut lesen/entfernen/zuweisen
54:
if(click_evt.target.id=="r1" && r1.hasAttribute("style"))
55:
{
56:
styleattr=r1.getAttributeNode("style");
57:
r1.removeAttributeNode(styleattr);
58:
r2.setAttributeNode(styleattr);
59:
}
60:
else if(click_evt.target.id=="r2" && r2.hasAttribute("style"))
61:
{
62:
styleattr=r2.getAttributeNode("style");
63:
r2.removeAttributeNode(styleattr);
64:
r1.setAttributeNode(styleattr);
65:
}
66:
}
67: 68:
]]>
69:
</script>
70: 71:
</defs>
72: 73:
<text x="20" y="30" style="fill: #000; font-size: 24px">
74:
Methoden get/remove/setAttributeNode()</text>
75:
<text x="20" y="50">Anklicken des jeweils gelben Rechtecks wendet
76:
die Methoden auf das style-Attribut an.</text>
77: 78:
<rect id="r1" x="170" y="70" width="50" height="50" onclick="GRSAttrNode(evt)"/>
79:
<rect id="r2" x="240" y="70" width="50" height="50" onclick="GRSAttrNode(evt)"/>
80: 81:
</svg>
[zum Anfang]
