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 02/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: <style type="text/css">
18: <![CDATA[
19:
20: image
21: {
22: opacity: 0.5;
23: }
24:
25: ]]>
26: </style>
27:
28: </defs>
29:
30: <text x="20" y="30" style="fill: #000; font-size: 24px">Opacity-Rollovers</text>
31:
32: <image xlink:href="bilder/adobesvg.gif" x="20" y="60" width="88" height="31">
33: <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseover"/>
34: <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseout"/>
35: </image>
36:
37: <image xlink:href="bilder/valid-xhtml10.png" x="120" y="60" width="88" height="31">
38: <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseover"/>
39: <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseout"/>
40: </image>
41:
42: <text x="20" y="120" style="fill: #000; font-size: 12px">onmouseover –›
43: opacity: 1.0, onmouseout –› opacity: 0.5 [set]</text>
44:
45: <image xlink:href="bilder/adobesvg.gif" x="20" y="140" width="88" height="31">
46: <animate attributeName="opacity" attributeType="CSS" from="0.5" to="1.0"
47: begin="mouseover" dur="1s" fill="freeze"/>
48: <animate attributeName="opacity" attributeType="CSS" from="1.0" to="0.5"
49: begin="mouseout" dur="1s" fill="freeze"/>
50: </image>
51:
52: <image xlink:href="bilder/valid-xhtml10.png" x="120" y="140" width="88" height="31">
53: <animate attributeName="opacity" attributeType="CSS" from="0.5" to="1.0"
54: begin="mouseover" dur="1s" fill="freeze"/>
55: <animate attributeName="opacity" attributeType="CSS" from="1.0" to="0.5"
56: begin="mouseout" dur="1s" fill="freeze"/>
57: </image>
58:
59: <text x="20" y="200" style="fill: #000; font-size: 12px">onmouseover –›
60: opacity: 1.0, onmouseout –› opacity: 0.5 [animate]</text>
61:
62: </svg>
[zum Anfang]