SVG – Learning by Coding

[ styleSheets_object.svg --> Grafik anzeigen ]

  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: <!--    AuthorDrThomas 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:         opacity0.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 0Index 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]