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 08/04 - 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: <style type="text/css">
18: <![CDATA[
19:
20: *
21: {
22: font-family: sans-serif;
23: font-size: 12px;
24: }
25:
26: ]]>
27: </style>
28:
29:
30: <script type="text/javascript">
31: <![CDATA[
32:
33: var test=0;
34:
35: function getScreenInfos(evt)
36: {
37: var svgdoc,w,h,aw,ah,cd,textout;
38: svgdoc=evt.target.ownerDocument;
39:
40: if(typeof(browserEval)!="undefined" && test==0)
41: {
42: browserEval(w=screen.width);
43: browserEval(h=screen.height);
44: browserEval(aw=screen.availWidth);
45: browserEval(ah=screen.availHeight);
46: browserEval(cd=screen.colorDepth);
47:
48: textout=svgdoc.getElementById("textout").getElementsByTagName("tspan");
49: textout.item(0).firstChild.nodeValue+=w;
50: textout.item(1).firstChild.nodeValue+=h;
51: textout.item(2).firstChild.nodeValue+=aw;
52: textout.item(3).firstChild.nodeValue+=ah;
53: textout.item(4).firstChild.nodeValue+=cd;
54: test++;
55: }
56: }
57:
58: ]]>
59: </script>
60:
61: </defs>
62:
63: <text x="20" y="30" style="fill: #000; font-size: 24px">
64: Browser-Scriptzugriff mit browserEval() [ASV]</text>
65:
66: <g style="fill: #00C; font-size: 16px; font-weight: bold; font-family: monospace"
67: id="textout" <?xml:space="preserve">
68: <text x="20" y="50">
69: <tspan x="20" dy="1em">screen.width : </tspan>
70: <tspan x="20" dy="1em">screen.height : </tspan>
71: <tspan x="20" dy="1em">screen.availWidth : </tspan>
72: <tspan x="20" dy="1em">screen.availHeight : </tspan>
73: <tspan x="20" dy="1em">screen.colorDepth : </tspan>
74: </text>
75: </g>
76:
77: <a xlink:href="" cursor="pointer" onclick="return false">
78: <text x="20" y="160" onclick="getScreenInfos(evt)">Screen-Informationen abfragen</text>
79: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
80: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
81: </a>
82:
83: </svg>
[zum Anfang]
