diff -r e774a42b8e2a -r f9c0ce760189 html/graf.svg
--- a/html/graf.svg	Wed Apr 14 00:40:51 2010 +0200
+++ b/html/graf.svg	Tue Apr 27 11:15:36 2010 +0200
@@ -15,20 +15,88 @@
     -->
 
     <style type="text/css">
-	rect.nekuracka {
-	    fill: blue;
-	    stroke: black;
+	rect.ne {
+	fill:  url(#ne_prechod);
+	stroke: black;
 	}
-	rect.kuracka {
-	    fill: red;
-	    stroke: black;
+	rect.ano {
+	fill: url(#ano_prechod);
+	stroke: black;
 	}
+
+	a:hover rect.ano, a:hover rect.ne {
+	fill: url(#zvyrazneny_prechod);
+	}
+
+	a:hover text {
+	fill: green;
+	}
+
+	line.ramecek {
+	stroke: black;
+	stroke-width: 2;
+	}
+
+
+	rect.pozadi {
+	fill: url(#pozadi_prechod);
+	}
+
+	text {
+	font-size: 12px;
+	font-family: Sans;
+	}
+
     </style>
 
+    <!-- pozadí – přechod -->
+    <defs>
+	<linearGradient id="pozadi_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
+	    <stop offset="0%" style="stop-color:silver; stop-opacity:1"/>
+	    <stop offset="100%" style="stop-color:gray; stop-opacity:1"/>
+	</linearGradient>
+    </defs>
 
-    <rect x="10" y="10" width="100" height="400" class="nekuracka"/>
-    <rect x="150" y="10" width="100" height="400" class="kuracka"/>
+    <!-- nekuřácký graf – přechod -->
+    <defs>
+	<linearGradient id="ne_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
+	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
+	    <stop offset="100%" style="stop-color:blue; stop-opacity:1"/>
+	</linearGradient>
+    </defs>
 
+    <!-- zvýrazněný graf – přechod -->
+    <defs>
+	<linearGradient id="zvyrazneny_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
+	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
+	    <stop offset="100%" style="stop-color:green; stop-opacity:1"/>
+	</linearGradient>
+    </defs>
 
+    <!-- kuřácký graf – přechod -->
+    <defs>
+	<linearGradient id="ano_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
+	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
+	    <stop offset="100%" style="stop-color:red; stop-opacity:1"/>
+	</linearGradient>
+    </defs>
 
+    <!-- pozadí a linka -->
+    <rect x="0" y="0" width="200" height="200" class="pozadi"/>
+    <line x1="10" y1="180" x2="190" y2="180" class="ramecek"/>
+
+    <!-- Nadpis grafu -->
+    <text x="60" y="20">Mělo by se tu:</text>
+
+    <!-- nekuřáci -->
+    <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx nekouřit">
+	<text x="30" y="195" class="ne">nekouřit</text>
+	<rect x="30" y="30" width="50" height="150" class="ne"/>
+    </a>
+
+    <!-- kuřáci -->
+    <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx kouřit">
+	<text x="130" y="195" class="ano">kouřit</text>
+	<rect x="120" y="30" width="50" height="150" class="ano"/>
+    </a>
 </svg>
\ No newline at end of file