SVG – Learning by Coding

[ style_object.svg --> Grafik anzeigen ]

  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: <!--    AuthorDrThomas 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-size12px;
 25:       }
 26: 
 27:       tspan
 28:       {
 29:         fill#F00;
 30:         font-size12px;
 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]