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]
