SVG – Learning by Coding

[ attributes.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 09/03 thomas@handmadecode.de     -->
 9: 
10: 
11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
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:       function AttrInfos(click_evt)
35:       {
36:         var obj,out="";
37:         obj=click_evt.target;
38:         out+="Objekt : "+obj;
39:         out+="\n\nhasAttributes() : "+obj.hasAttributes();
40: 
41:         if(obj.hasAttributes())
42:         {
43:           attr=obj.attributes;
44:           out+="\n\nattributes : "+attr;
45:           out+="\n\nAnzahl Attribute : "+attr.length;
46: 
47:           for(i=0;i<attr.length;i++)
48:           {
49:             out+="\nAttribut : "+attr.item(i).nodeName;
50:             out+=" - Wert : "+attr.item(i).nodeValue;
51:           }
52:         }
53: 
54:         alert(out);
55:       }
56: 
57:       ]]>
58:     </script>
59: 
60:   </defs>
61: 
62:   <text x="30" y="30" style="fill: #000; font-size: 24px">
63:     attributes hasAttributes() / nodeName nodeValue
64:   </text>
65: 
66:   <rect x="90" y="70" width="40" height="40" style="fill: #00C"
67:     onclick="AttrInfos(evt)"/>
68: 
69:   <circle cx="170" cy="90" r="20" style="fill: #F00"
70:     onclick="AttrInfos(evt)"/>
71: 
72:   <polygon points="210,110 230,70 250,110" style="fill: #090"
73:     onclick="AttrInfos(evt)"/>
74: 
75:   <text x="120" y="140" onclick="AttrInfos(evt)">Objekte anklicken!</text>
76: 
77: </svg>

[zum Anfang]