SVG – Learning by Coding

[ create-methods.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:   <!ENTITY h "Hallo">
  6: ]>
  7: 
  8: <!-- SVG Learning By Coding http://www.datenverdrahten.de/svglbc/ -->
  9: <!--    AuthorDrThomas Meinike 08/04 thomas@handmadecode.de     -->
 10: 
 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 12:   onload="Create(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:       *
 23:       {
 24:         font-familysans-serif;
 25:         font-size12px;
 26:       }
 27: 
 28:       ]]>
 29:     </style>
 30: 
 31: 
 32:     <script type="text/javascript">
 33:       <![CDATA[
 34: 
 35:       function Create(evt)
 36:       {
 37:         var svgdoc,svgroot,pi,df,en,et,ko,kr,cx,cy,ra,te,tx,ty,tc,tn,xmlser,output,
 38:             svgns="http://www.w3.org/2000/svg";
 39: 
 40:         svgdoc=evt.target.ownerDocument;
 41:         svgroot=svgdoc.rootElement;
 42: 
 43:         // createProcessingInstruction()
 44:         pi=svgdoc.createProcessingInstruction("xml-stylesheet",
 45:           "href=\"extern.css\" type=\"text/css\"");
 46:         svgdoc.insertBefore(pi,svgroot);
 47: 
 48:         // createEntityReference()
 49:         en=svgdoc.createEntityReference("h");
 50: 
 51:         // createCDATASection()
 52:         cd=svgdoc.createCDATASection("XML-Code: <svg>...</svg>");
 53: 
 54:         // createComment()
 55:         ko=svgdoc.createComment("Kommentartext");
 56: 
 57:         // createDocumentFragment()
 58:         df=svgdoc.createDocumentFragment();
 59: 
 60:         if(df && cd && ko)
 61:         {
 62:           df.appendChild(cd);
 63:           df.appendChild(ko);
 64:         }
 65: 
 66:         kr=svgdoc.createElementNS(svgns,"circle"); // createElementNS() bzw. createElement()
 67:         cx=svgdoc.createAttribute("cx");           // createAttribute()
 68:         cx.nodeValue="100";                        // Alternative:
 69:         kr.setAttributeNode(cx);                   // kr.setAttribute("cx","100")
 70:         cy=svgdoc.createAttribute("cy");
 71:         cy.nodeValue="100";
 72:         kr.setAttributeNode(cy);
 73:         ra=svgdoc.createAttribute("r");
 74:         ra.nodeValue="20";
 75:         kr.setAttributeNode(ra);
 76: 
 77:         if(df && kr)df.appendChild(kr);
 78: 
 79:         te=svgdoc.createElementNS(svgns,"text");
 80:         tx=svgdoc.createAttribute("x");
 81:         tx.nodeValue="30";
 82:         te.setAttributeNode(tx);
 83:         ty=svgdoc.createAttribute("y");
 84:         ty.nodeValue="60";
 85:         te.setAttributeNode(ty);
 86:         tc=svgdoc.createAttribute("class");
 87:         tc.nodeValue="xyz";
 88:         te.setAttributeNode(tc);
 89:         if(te && en)te.appendChild(en);
 90:         tn=svgdoc.createTextNode(" Welt!");        // createTextNode()
 91:         if(te && tn)te.appendChild(tn);
 92: 
 93:         if(df && te)df.appendChild(te);
 94: 
 95:         if(window.XMLSerializer)
 96:         {
 97:           xmlser=new XMLSerializer();
 98:           output=xmlser.serializeToString(svgroot.previousSibling)+
 99:             "\n\n"+xmlser.serializeToString(df);
100:         }
101:         else if(window.printNode)
102:         {
103:           output=printNode(svgroot.previousSibling)+"\n\n"+printNode(df);
104:         }
105:         else output="Kein Ergebnis erhalten!";
106: 
107:         alert("Generierter SVG-Code:\n\n"+output);
108:         if(df)svgroot.appendChild(df);
109:       }
110: 
111:       ]]>
112:     </script>
113: 
114:   </defs>
115: 
116:   <text x="20" y="30" style="fill: #000; font-size: 24px">
117:     Anwendung von "create"-DOM-Methoden
118:   </text>
119: 
120:   <text x="30" y="150">Verwendete "create"-Methoden:</text>
121:   <text x="30" y="155" style="fill: #00C">
122:     <tspan x="30" dy="16">createAttribute()</tspan>
123:     <tspan x="30" dy="16">createCDATASection()</tspan>
124:     <tspan x="30" dy="16">createComment()</tspan>
125:     <tspan x="30" dy="16">createDocumentFragment()</tspan>
126:     <tspan x="30" dy="16">createElementNS()</tspan>
127:     <tspan x="30" dy="16">createEntityReference()</tspan>
128:     <tspan x="30" dy="16">createProcessingInstruction()</tspan>
129:     <tspan x="30" dy="16">createTextNode()</tspan>
130:     <tspan x="30" dy="24" style="fill: #000">
131:       Hinweis: Die mittels createProcessingInstruction() aus extern.css eingebundenen
132:       Formatierungen werden</tspan>
133:     <tspan x="30" dy="16" style="fill: #000">
134:       nur mit ASV 6.0 bzwFF 1.5 angezeigtwobei FF die Entity-Referenz
135:       nicht erzeugt (das Wort 'Hallo' fehlt)!</tspan>
136:   </text>
137: 
138: </svg>

[zum Anfang]