SVG – Learning by Coding

[ draganddrop.svg --> Grafik anzeigen ]

 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: <!--    AuthorDrThomas 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]