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: 12:
<title>SVG - Learning by Coding</title>
13:
<desc>SVG-Spezifikation in Beispielen</desc>
14: 15:
<defs>
16: 17:
<script type="text/javascript">
18:
<![CDATA[
19: 20:
var clk=true;
21: 22:
function MozDOMTest2()
23:
{
24:
if(clk)
25:
{
26:
if((navigator.mimeTypes &&
27:
navigator.mimeTypes["image/svg+xml"] &&
28:
!navigator.mimeTypes["image/svg+xml"].enabledPlugin) ||
29:
document.implementation.hasFeature("org.w3c.dom.svg","1.0"))
30:
{
31:
var xmlcontent,parser,xmlobject,svgobject;
32: 33:
// XML-Inhalt als String
34:
xmlcontent='<svg xmlns="http://www.w3.org/2000/svg">';
35:
xmlcontent+=' <g>';
36:
xmlcontent+=' <circle cx="150" cy="150" r="60" fill="#FF0" stroke="#000"/>';
37:
xmlcontent+=' <text x="50" y="250" font-size="12px">SVG mittels parseFromString() erzeugt.</text>';
38:
xmlcontent+=' </g>';
39:
xmlcontent+='</svg>';
40: 41:
// neue DOM-Parser-Instanz und Dokumentobjekt aus dem String erstellen
42:
if(window.DOMParser)
43:
{
44:
parser=new DOMParser();
45:
xmlobject=parser.parseFromString(xmlcontent,"text/xml");
46: 47:
// g-Element mit Inhalt aus xmlobject abfragen
48:
svgobject=document.importNode(
49:
xmlobject.documentElement.getElementsByTagName("g").item(0),true);
50: 51:
// Ergebnis (Dokumentfragment) in den SVG-DOM-Baum einhaengen
52:
document.documentElement.appendChild(svgobject);
53:
}
54:
else alert("Kein Ergebnis erhalten!");
55:
}
56:
else alert("Keine SVG-Implementierung\nauf Mozilla-Basis gefunden!");
57:
}
58:
else alert("Der Test wurde bereits ausgeführt!");
59:
}
60: 61:
]]>
62:
</script>
63: 64:
</defs>
65: 66:
<text x="20" y="30" style="fill: #000; font-size: 24px">
67:
Mozilla-DOM: SVG-Inhalte aus XML-Zeichenkette laden</text>
68: 69:
<a xlink:href="" cursor="pointer" onclick="return false"><text x="20" y="60" style="fill: #F00; font-size: 14px"
70:
onclick="MozDOMTest2();clk=false">Test ausführen!</text></a>
71: 72:
</svg>
[zum Anfang]
