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]
