SVG – Learning by Coding

[ getSVGDocument.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 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:     [HinweisASV 3.0x und 6.0pr1 zeigen Änderungen nur im DOMaber nicht visuell!]
63:   </text>
64: 
65: </svg>

[zum Anfang]