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:
]>
6: 7:
<!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
8:
<!-- Author: Dr. Thomas Meinike 09/05 - thomas@handmadecode.de -->
9: 10:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11:
onload="Init()">
12: 13:
<title>SVG - Learning by Coding</title>
14:
<desc>SVG-Spezifikation in Beispielen</desc>
15: 16:
<defs>
17: 18:
<script type="text/javascript">
19:
<![CDATA[
20: 21:
function Init()
22:
{
23:
if(window.getSVGViewerVersion && getSVGViewerVersion().indexOf("Adobe")!=-1)
24:
{
25:
var link1=document.getElementById("link1");
26:
var link2=document.getElementById("link2");
27:
link1.style.setProperty("visibility","visible","");
28:
link2.style.setProperty("visibility","hidden","");
29:
}
30:
}
31: 32:
]]>
33:
</script>
34: 35:
<script type="text/javascript; e4x=1"><!-- E4X-Aktivierung ab Firefox 1.5 -->
36:
<![CDATA[
37: 38:
var clk=true;
39: 40:
function MozDOMTest7()
41:
{
42:
if(clk)
43:
{
44:
if((navigator.mimeTypes &&
45:
navigator.mimeTypes["image/svg+xml"] &&
46:
!navigator.mimeTypes["image/svg+xml"].enabledPlugin) ||
47:
document.implementation.hasFeature("org.w3c.dom.svg","1.0"))
48:
{
49:
var xmlcontent,new_rect;
50:
var svgns="http://www.w3.org/2000/svg";
51: 52:
// XML-Inhalte direkt zuweisen - alternativ mittels
53:
// xmlcontent=new XML("<rechtecke>...</rechtecke>");
54:
xmlcontent=<rechtecke>
55:
<rechteck farbe="#0C6">
56:
<x_koord>50</x_koord>
57:
<y_koord>120</y_koord>
58:
<breite>180</breite>
59:
<hoehe>75</hoehe>
60:
</rechteck>
61:
<rechteck farbe="#69F">
62:
<x_koord>300</x_koord>
63:
<y_koord>70</y_koord>
64:
<breite>100</breite>
65:
<hoehe>250</hoehe>
66:
</rechteck>
67:
<rechteck farbe="#FC3">
68:
<x_koord>100</x_koord>
69:
<y_koord>250</y_koord>
70:
<breite>90</breite>
71:
<hoehe>40</hoehe>
72:
</rechteck>
73:
</rechtecke>;
74: 75:
// XML-Inhalte als neue rect-Elemente aufbereiten
76:
// .. verhaelt sich analog zu // in XPath-Ausdruecken
77:
for each(rechteck in xmlcontent..rechteck)
78:
{
79:
new_rect=document.createElementNS(svgns,"rect");
80:
new_rect.setAttribute("x",rechteck.x_koord);
81:
new_rect.setAttribute("y",rechteck.y_koord);
82:
new_rect.setAttribute("width",rechteck.breite);
83:
new_rect.setAttribute("height",rechteck.hoehe);
84:
new_rect.setAttribute("fill",rechteck.@farbe);
85: 86:
// aktuelles rect-Element in den SVG-DOM-Baum einhaengen
87:
document.documentElement.appendChild(new_rect);
88:
}
89: 90:
// alternative Variante
91:
//*
92:
var rect_anz=xmlcontent.rechteck.length();
93:
for(i=0;i<rect_anz;i++)
94:
{
95:
new_rect=document.createElementNS(svgns,"rect");
96:
new_rect.setAttribute("x",xmlcontent.rechteck[i].x_koord);
97:
new_rect.setAttribute("y",xmlcontent.rechteck[i].y_koord);
98:
new_rect.setAttribute("width",xmlcontent.rechteck[i].breite);
99:
new_rect.setAttribute("height",xmlcontent.rechteck[i].hoehe);
100:
new_rect.setAttribute("fill",xmlcontent.rechteck[i].@farbe);
101: 102:
// aktuelles rect-Element in den SVG-DOM-Baum einhaengen
103:
document.documentElement.appendChild(new_rect);
104:
}
105:
*/
106: 107:
// Information einblenden
108:
document.getElementById("info").style.setProperty("visibility","visible","");
109:
}
110:
else alert("Keine SVG-Implementierung\nauf Mozilla-Basis gefunden!");
111:
}
112:
else alert("Der Test wurde bereits ausgeführt!");
113:
}
114: 115:
]]>
116:
</script>
117: 118:
</defs>
119: 120:
<text x="20" y="30" style="fill: #000; font-size: 24px">
121:
Mozilla-DOM: SVG und ECMAScript for XML (E4X)</text>
122: 123:
<a id="link1" xlink:href="" style="visibility: hidden" onclick="return false">
124:
<text x="20" y="60" style="fill: #F00; font-size: 14px"
125:
onclick="alert('Die E4X-Techniken sind nicht verfügbar!')">
126:
Test ausführen!</text></a>
127: 128:
<a id="link2" xlink:href="" style="visibility: visible" onclick="return false">
129:
<text x="20" y="60" style="fill: #F00; font-size: 14px"
130:
onclick="MozDOMTest7();clk=false">Test ausführen!</text></a>
131: 132:
<g id="info" style="visibility: hidden">
133:
<text x="50" y="350" font-size="12px">
134:
Die neuen SVG-Objekte wurden mittels E4X-Techniken generiert.</text>
135:
</g>
136: 137:
</svg>
[zum Anfang]
