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 01/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(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,svgobj,check=false;
35: 36: 37:
function Init(load_evt)
38:
{
39:
svgdoc=load_evt.target.ownerDocument;
40:
svgobj=svgdoc.getElementById("zielkreis");
41:
}
42: 43: 44:
function NewEvent(click_evt)
45:
{
46:
var newevt;
47: 48:
// DOM-Theorie
49:
//*
50:
newevt=svgdoc.createEvent("MouseEvents");
51:
newevt.initMouseEvent(
52:
"click",true,true,svgdoc,1,0,0,0,0,false,false,false,false,0,null);
53: 54:
// initMouseEvent-Argumente:
55:
// typeArg,canBubbleArg,cancelableArg,viewArg,detailArg,screenXArg,
56:
// screenYArg,clientXArg,clientYArg,ctrlKeyArg,altKeyArg,shiftKeyArg,
57:
// metaKeyArg,buttonArg,relatedTargetArg
58: 59:
check=svgobj.dispatchEvent(newevt);
60:
if(check)alert("click-Event wurde erzeugt und ausgelöst.");
61:
*/
62: 63:
// ASV6-Praxis
64:
var ver=getSVGViewerVersion();
65:
if(ver.indexOf("Adobe")!=-1 && ver.indexOf("6.0")!=-1)
66:
{
67:
newevt=svgdoc.createEvent("click");
68:
alert(newevt+" : "+newevt.type); // [object CustomEvent] : click
69:
check=svgobj.dispatchEvent(newevt);
70:
if(check)alert("click-Event wurde erzeugt und ausgelöst.");
71:
}
72:
else alert("createEvent() funktioniert nur mit dem ASV 6.0!");
73:
}
74: 75: 76:
function TestFunc()
77:
{
78:
svgobj.setAttribute("fill","#FF0");
79:
}
80: 81:
]]>
82:
</script>
83: 84:
</defs>
85: 86:
<text x="20" y="30" style="fill: #000; font-size: 24px">
87:
Ereignisse mit createEvent() erzeugen [ASV 6.0]</text>
88: 89:
<circle cx="120" cy="90" r="20" fill="#F00" onclick="NewEvent(evt)"/>
90:
<circle id="zielkreis" cx="220" cy="90" r="20" fill="#090" onclick="TestFunc()"/>
91: 92:
<text x="20" y="140">
93:
<tspan x="20" dy="1.2em">
94:
Anklicken des roten Kreises erzeugt neues click-Ereignis,</tspan>
95:
<tspan x="20" dy="1.2em">
96:
welches die für den grünen Kreis definierte Funktion</tspan>
97:
<tspan x="20" dy="1.2em">
98:
mittels dispatchEvent() aufruft [Füllfarbe wird gelb].</tspan>
99:
</text>
100: 101:
</svg>
[zum Anfang]
