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]
