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/03 - 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: text
22: {
23: fill: #00C;
24: font-size: 12px;
25: }
26:
27: tspan
28: {
29: fill: #F00;
30: font-size: 12px;
31: }
32:
33: ]]>
34: </style>
35:
36:
37: <script type="text/javascript">
38: <![CDATA[
39:
40: var svgdoc,svgroot;
41:
42:
43: function getSVGDoc(load_evt)
44: {
45: svgdoc=load_evt.target.ownerDocument;
46: svgroot=svgdoc.documentElement;
47: }
48:
49:
50: function DoStyles(x)
51: {
52: var textobj,styleobj;
53:
54: textobj=svgdoc.getElementById("testtext");
55: styleobj=textobj.style;
56:
57: if(x==0)alert(styleobj);
58: if(x==1)alert(styleobj.length);
59: if(x==2)alert("item(0) = "+styleobj.item(0)+"\nitem(1) = "+styleobj.item(1));
60: if(x==3)alert("fill: "+styleobj.getPropertyValue("fill"));
61: if(x==4)styleobj.setProperty("text-decoration","underline","");
62: if(x==5)styleobj.removeProperty("text-decoration");
63: if(x==6)alert(textobj.style.cssText);
64: if(x==7)alert(textobj.getAttribute("style"));
65: if(x==8)textobj.setAttribute("style","fill: #F00; font-size: 18px");
66: }
67:
68: ]]>
69: </script>
70:
71: </defs>
72:
73: <text x="20" y="30" style="fill: #000; font-size: 24px">
74: DOM-Methoden für dynamischen CSS-Zugriff</text>
75:
76: <text id="testtext" x="20" y="75" style="font-size: 18px; fill: #090">
77: ein mit CSS formatierter Text</text>
78:
79: <a xlink:href="" cursor="pointer" onclick="return false">
80: <text x="30" y="100" onclick="DoStyles(0)">
81: <tspan>style</tspan> [auf Style-Objekt zugreifen]
82: </text>
83: </a>
84:
85: <a xlink:href="" cursor="pointer" onclick="return false">
86: <text x="30" y="120" onclick="DoStyles(1)">
87: <tspan>length</tspan> [Anzahl der Eigenschaften]
88: </text>
89: </a>
90:
91: <a xlink:href="" cursor="pointer" onclick="return false">
92: <text x="30" y="140" onclick="DoStyles(2)">
93: <tspan>item(i)</tspan> [einzelne Eigenschaften abfragen]
94: </text>
95: </a>
96:
97: <a xlink:href="" cursor="pointer" onclick="return false">
98: <text x="30" y="160" onclick="DoStyles(3)">
99: <tspan>getPropertyValue()</tspan> [einzelne Eigenschaftswerte abfragen]
100: </text>
101: </a>
102:
103: <a xlink:href="" cursor="pointer" onclick="return false">
104: <text x="30" y="180" onclick="DoStyles(4)">
105: <tspan>setProperty()</tspan> [Eigenschaften und Werte setzen/ändern]
106: </text>
107: </a>
108:
109: <a xlink:href="" cursor="pointer" onclick="return false">
110: <text x="30" y="200" onclick="DoStyles(5)">
111: <tspan>removeProperty()</tspan> [Eigenschaften entfernen]
112: </text>
113: </a>
114:
115: <a xlink:href="" cursor="pointer" onclick="return false">
116: <text x="30" y="220" onclick="DoStyles(6)">
117: <tspan>cssText</tspan> [style-Attribut als Zeichenkette lesen]
118: </text>
119: </a>
120:
121: <a xlink:href="" cursor="pointer" onclick="return false">
122: <text x="30" y="240" onclick="DoStyles(7)">
123: <tspan>getAttribute("style")</tspan> [style-Attribut als Zeichenkette lesen]
124: </text>
125: </a>
126:
127: <a xlink:href="" cursor="pointer" onclick="return false">
128: <text x="30" y="260" onclick="DoStyles(8)">
129: <tspan>setAttribute("style","...")</tspan> [style-Attribut neu zuweisen]
130: </text>
131: </a>
132:
133: </svg>
[zum Anfang]
