SVG – Learning by Coding
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: <!-- Author: Dr. Thomas 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-family: sans-serif;
25: font-size: 12px;
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 bzw. FF 1.5 angezeigt, wobei FF die Entity-Referenz
135: nicht erzeugt (das Wort 'Hallo' fehlt)!</tspan>
136: </text>
137:
138: </svg>
[zum Anfang]
