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 07/03 - 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 obj,x,y,attr1,attr2,wert1,wert2,aktiv=false;
21:
22: function MoveObj(evt)
23: {
24: if(aktiv)
25: {
26: x=evt.clientX()
27: y=evt.clientY()
28:
29: if(obj.tagName=="circle")
30: {
31: attr1="cx";
32: attr2="cy";
33: wert1=x;
34: wert2=y;
35: }
36: else if(obj.tagName=="rect")
37: {
38: attr1="x";
39: attr2="y";
40: wert1=x-obj.getAttribute("width")/2;
41: wert2=y-obj.getAttribute("height")/2;
42: }
43:
44: obj.setAttribute(attr1,wert1);
45: obj.setAttribute(attr2,wert2);
46: }
47: }
48:
49: function ClickObj(evt)
50: {
51: obj=evt.target;
52: aktiv=true;
53: }
54:
55: function OutOfObj(evt)
56: {
57: aktiv=false;
58: }
59:
60: ]]>
61: </script>
62:
63: </defs>
64:
65: <text x="20" y="30" style="fill: #000; font-size: 24px">
66: Drag and Drop simulieren</text>
67:
68: <text x="20" y="55" style="fill: #000">
69: Objekte mit dem Mauszeiger erfassen und langsam bewegen ...</text>
70:
71: <circle r="20" cx="100" cy="100" style="fill: #F00"
72: onmousedown="ClickObj(evt)" onclick="ClickObj(evt)" onmousemove="MoveObj(evt)"
73: onmouseup="OutOfObj(evt)" onmouseout="OutOfObj(evt)">
74: <set attributeName="fill" attributeType="CSS" to="#090" begin="mousedown"/>
75: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseup"/>
76: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/>
77: </circle>
78:
79: <rect x="150" y="85" width="50" height="30" style="fill: #00F"
80: onmousedown="ClickObj(evt)" onclick="ClickObj(evt)" onmousemove="MoveObj(evt)"
81: onmouseup="OutOfObj(evt)" onmouseout="OutOfObj(evt)">
82: <set attributeName="fill" attributeType="CSS" to="#FF0" begin="mousedown"/>
83: <set attributeName="fill" attributeType="CSS" to="#00F" begin="mouseup"/>
84: <set attributeName="fill" attributeType="CSS" to="#00F" begin="mouseout"/>
85: </rect>
86:
87: </svg>
[zum Anfang]
