SVG – Learning by Coding

[ attr_node_methods.svg --> Grafik anzeigen ]

 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: <!--    AuthorDrThomas 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-familysans-serif;
24:         font-size12px;
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]