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 02/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="getDocRoot(evt)">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <style type="text/css">
19: <![CDATA[
20:
21: *
22: {
23: font-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: ]]>
28: </style>
29:
30:
31: <script type="text/javascript">
32: <![CDATA[
33:
34: var svgdoc,svgroot,xi=0,yi=0,
35: svgns="http://www.w3.org/2000/svg";
36:
37:
38: function getDocRoot(load_evt)
39: {
40: svgdoc=load_evt.target.ownerDocument;
41: svgroot=svgdoc.documentElement;
42: }
43:
44:
45: function newImage(url,x,y,w,h)
46: {
47: var newobj;
48:
49: newobj=svgdoc.createElementNS(svgns,"image");
50:
51: // xlink:href
52: // wichtig ist hier setAttributeNS() mit Angabe des Namespaces
53: newobj.setAttributeNS("http://www.w3.org/1999/xlink","href",url);
54:
55: // x,y,width,height
56: newobj.setAttribute("x",x+xi);
57: newobj.setAttribute("y",y+yi);
58: newobj.setAttribute("width",w);
59: newobj.setAttribute("height",h);
60:
61: svgroot.appendChild(newobj);
62:
63: xi+=w;
64: yi+=h;
65: }
66:
67: ]]>
68: </script>
69:
70: </defs>
71:
72: <text x="20" y="30" style="fill: #000; font-size: 24px">
73: Beispiel zum SVG-DOM-Scripting</text>
74:
75: <a xlink:href="" cursor="pointer" onclick="return false">
76: <text x="30" y="60" style="fill: #F00"
77: onclick="newImage('bilder/adobesvg.gif',100,100,88,31)">
78: neues Element (image) – wichtig ist hier setAttributeNS()
79: </text>
80: </a>
81:
82: </svg>
[zum Anfang]
