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]
