SVG – Learning by Coding

[ display_visibility.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 03/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:     <script type="text/javascript">
18:       <![CDATA[
19: 
20:       function UnSichtbar(click_evt,id,prop)
21:       {
22:         var objekt=click_evt.target.ownerDocument.getElementById(id).style;
23: 
24:         if(prop=="display")
25:         {
26:           if(objekt.getPropertyValue(prop)=="block")
27:           objekt.setProperty(prop,"none","");
28:           else objekt.setProperty(prop,"block","");
29:         }
30: 
31:         if(prop=="visibility")
32:         {
33:           if(objekt.getPropertyValue(prop)=="visible")
34:           objekt.setProperty(prop,"hidden","");
35:           else objekt.setProperty(prop,"visible","");
36:         }
37:       }
38: 
39:       ]]>
40:     </script>
41: 
42:   </defs>
43: 
44:   <text x="20" y="30" style="fill: #000; font-size: 24px">
45:     Eigenschaften display bzwvisibility</text>
46: 
47:   <text x="30" y="70" style="fill: #00C; font-size: 18px">
48:     <tspan style="display: block">Text1 </tspan>
49:     <tspan id="text1" style="display: block"
50:      onclick="UnSichtbar(evt,'text1','display')">Text2</tspan>
51:     <tspan style="display: block">Text3 </tspan>
52:     <tspan onclick="UnSichtbar(evt,'text1','display')">(displayblock)</tspan53:   </text>
54: 
55:   <text x="30" y="100" style="fill: #F00; font-size: 18px">
56:     <tspan style="visibility: visible">Text1 </tspan>
57:     <tspan id="text2" style="visibility: visible"
58:       onclick="UnSichtbar(evt,'text2','visibility')">Text2</tspan>
59:     <tspan style="visibility: visible">Text3 </tspan>
60:     <tspan onclick="UnSichtbar(evt,'text2','visibility')">(visibilityvisible)</tspan61:   </text>
62: 
63:   <text x="30" y="140" style="fill: #000; font-size: 14px; font-weight: bold">
64:     Jeweils "Text2" bzwden Text in Klammern anklicken!</text>
65:   <text x="30" y="160" style="fill: #000; font-size: 14px">
66:     displaynone nimmt den Inhalt aus dem Dokument heraus,</text>
67:   <text x="30" y="180" style="fill: #000; font-size: 14px">
68:     visibilityhidden versteckt den Inhaltdieser belegt aber weiterhin Platz.
69:   </text>
70: 
71: </svg>

[zum Anfang]