SVG – Learning by Coding
1:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
2:
xml-stylesheet href="extern.css" type="text/css"
3:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
4:
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
5:
<!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
6:
]>
7: 8:
<!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
9:
<!-- Author: Dr. Thomas Meinike 07/04 - thomas@handmadecode.de -->
10: 11:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
12:
onload="getSVGDoc(evt)">
13: 14:
<title>SVG - Learning by Coding</title>
15:
<desc>SVG-Spezifikation in Beispielen</desc>
16: 17:
<defs>
18: 19:
<style type="text/css">
20:
<![CDATA[
21: 22:
rect
23:
{
24:
fill: #090;
25:
opacity: 0.2;
26:
}
27: 28:
]]>
29:
</style>
30: 31: 32:
<script type="text/javascript">
33:
<![CDATA[
34: 35:
var svgdoc,csscol;
36: 37: 38:
function getSVGDoc(load_evt)
39:
{
40:
svgdoc=load_evt.target.ownerDocument;
41:
csscol=svgdoc.styleSheets;
42:
}
43: 44: 45:
function getCSSInfos()
46:
{
47:
var cssobj1,cssobj2;
48: 49:
if(csscol)
50:
{
51:
//*
52:
- Prinzip:
53:
svgDocument.styleSheets.item(x).cssRules.item(y)
54:
x = Index der Stylesheets ab 0, y = Index der Regeln ab 0
55: 56:
- Zugriff auf Eigenschaften:
57:
objekt.selectorText
58:
objekt.style.cssText
59:
objekt.style.getPropertyValue('eigenschaft')
60:
objekt.style.setProperty('eigenschaft','wert','prioritaet')
61:
objekt.style.removeProperty('eigenschaft')
62:
objekt.style.getPropertyPriority('eigenschaft')
63: 64:
- Hinweise:
65:
ASV 3.0x kennt styleSheets-Objekt nicht
66:
ASV 6.0 preview 1 kann nur lesend darauf zugreifen
67:
*/
68: 69:
cssobj1=csscol.item(0).cssRules; // erstes Stylesheet (extern)
70:
cssobj2=csscol.item(1).cssRules; // zweites Stylesheet (intern)
71: 72:
alert("Anzahl Stylesheets: "+csscol.length+"\n\n"
73:
+"Name des ersten Selektors im externen Stylesheet: "
74:
+cssobj1.item(0).selectorText+"\n"
75:
+"Abfrage von cssText: "
76:
+cssobj1.item(0).style.cssText+"\n"
77:
+"Abfrage des Wertes der Eigenschaft stroke: "
78:
+cssobj1.item(0).style.getPropertyValue('stroke')+"\n\n"
79:
+"Name des ersten Selektors im internen Stylesheet: "
80:
+cssobj2.item(0).selectorText+"\n"
81:
+"Abfrage von cssText: "
82:
+cssobj2.item(0).style.cssText+"\n"
83:
+"Abfrage des Wertes der Eigenschaft opacity: "
84:
+cssobj2.item(0).style.getPropertyValue('opacity')+"\n\n"
85:
+"Versuch des Setzens neuer Werte (nach Klick auf 'OK')\n"
86:
+"Kreis: fill auf #F00 / Rechteck: opacity auf 1.0"
87:
);
88: 89:
cssobj1.item(0).style.setProperty('fill','#F00','important');
90:
cssobj2.item(0).style.setProperty('opacity','1.0','important');
91: 92:
alert("Neuer fill-Wert des Kreises: "
93:
+cssobj1.item(0).style.getPropertyValue('fill')+" (rot?)\n"
94:
+"Neuer opacity-Wert des Rechtecks: "
95:
+cssobj2.item(0).style.getPropertyValue('opacity')+" (dunkler?)\n\n"
96:
+"Prioritaet der fill-Eigenschaft des Kreises: "
97:
+cssobj1.item(0).style.getPropertyPriority('fill')+"\n"
98:
+"Prioritaet der opacity-Eigenschaft des Rechtecks: "
99:
+cssobj2.item(0).style.getPropertyPriority('opacity')+"\n\n"
100:
+"fill-Eigenschaft des Rechtecks wird nun entfernt.\n"
101:
+"Die Farbe sollte nach schwarz wechseln ..."
102:
);
103: 104:
cssobj2.item(0).style.removeProperty('fill');
105:
}
106:
else alert("Das styleSheets-Objekt\nist nicht verfuegbar!");
107:
}
108: 109:
]]>
110:
</script>
111: 112:
</defs>
113: 114:
<text x="20" y="30" style="fill: #000; font-size: 24px">
115:
CSS-Zugriff mittels styleSheets-Objekt
116:
</text>
117: 118:
<circle cx="150" cy="100" r="30" onclick="getCSSInfos()"/>
119:
<rect x="200" y="60" width="150" height="75" onclick="getCSSInfos()"/>
120:
<text x="160" y="170">Kreis oder Rechteck anklicken!</text>
121: 122:
</svg>
[zum Anfang]
