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: <script type="text/javascript">
18: <![CDATA[
19:
20: function TestFkt(evt)
21: {
22: var svgdoc,extobj,extrect;
23: svgdoc=evt.target.ownerDocument;
24:
25: // Zugriff auf das eingebundene Dokument und das Rechteck
26: extobj=svgdoc.getElementById("extobj").getSVGDocument();
27: extrect=extobj.getElementById("extrect");
28:
29: // Farbe des eingebundenen Rechtecks abfragen
30: alert("Rechteck-Farbe: "+extrect.style.getPropertyValue("fill")); // red
31:
32: // Farbe des eingebundenen Rechtecks neu setzen
33: extrect.style.setProperty("fill","green","");
34:
35: // Farbe des eingebundenen Rechtecks erneut abfragen
36: alert("Rechteck-Farbe: "+extrect.style.getPropertyValue("fill")); // green
37: }
38:
39: ]]>
40: </script>
41:
42: </defs>
43:
44: <text x="20" y="30" style="fill: #000; font-size: 24px">
45: DOM-Zugriff mit getSVGDocument()</text>
46:
47: <image id="extobj" xlink:href="extern.svg" x="20" y="50" width="100%" height="100%"/>
48: <!--
49: Der wesentliche Teil von extern.svg ist ein rotes Rechteck:
50: <rect id="extrect" x="0" y="0" width="100" height="50" rx="5" style="fill: red"/>
51: -->
52:
53: <a xlink:href="" cursor="pointer" onclick="return false">
54: <text x="20" y="130" onclick="TestFkt(evt)">
55: Eingebundenes SVG-Dokument ansprechen und Farbe ändern ...
56: </text>
57: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
58: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
59: </a>
60:
61: <text x="20" y="150">
62: [Hinweis: ASV 3.0x und 6.0pr1 zeigen Änderungen nur im DOM, aber nicht visuell!]
63: </text>
64:
65: </svg>
[zum Anfang]
