Zobrazování jen schválených podniků, SQL (kategorie, kuřáckost).
2 <svg width="1000" height="1000"
3 xmlns="http://www.w3.org/2000/svg"
4 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <style type="text/css">
9 fill: url(#ne_prechod);
13 fill: url(#ano_prechod);
17 a:hover rect.ano, a:hover rect.ne {
18 fill: url(#zvyrazneny_prechod);
32 fill: url(#pozadi_prechod);
42 <!-- pozadí – přechod -->
44 <linearGradient id="pozadi_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
45 <stop offset="20%" style="stop-color:rgb(245,245,255); stop-opacity:0.5"/>
46 <stop offset="100%" style="stop-color:silver; stop-opacity:0.8"/>
50 <!-- nekuřácký graf – přechod -->
52 <linearGradient id="ne_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
53 <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
54 <stop offset="100%" style="stop-color:blue; stop-opacity:1"/>
58 <!-- zvýrazněný graf – přechod -->
60 <linearGradient id="zvyrazneny_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
61 <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
62 <stop offset="100%" style="stop-color:green; stop-opacity:1"/>
66 <!-- kuřácký graf – přechod -->
68 <linearGradient id="ano_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
69 <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
70 <stop offset="100%" style="stop-color:red; stop-opacity:1"/>
74 <!-- pozadí a linka -->
75 <rect x="0" y="0" width="200" height="200" class="pozadi"/>
76 <line x1="10" y1="180" x2="190" y2="180" class="ramecek"/>
79 <text x="60" y="20">Mělo by se tu:</text>
82 <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx nekouřit">
83 <text x="30" y="195" class="ne">nekouřit</text>
84 <rect x="30" y="30" width="50" height="150" class="ne"/>
88 <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx kouřit">
89 <text x="130" y="195" class="ano">kouřit</text>
90 <rect x="120" y="30" width="50" height="150" class="ano"/>