html/graf.svg
author František Kučera <franta-hg@frantovo.cz>
Thu Jan 13 23:54:59 2011 +0100 (2011-01-13)
changeset 166 7f9c6d10c3f6
parent 106 6209f3d550c5
permissions -rw-r--r--
Spokojenost, štítky, zjednodušení CSS.
     1 <?xml version="1.0"?>
     2 <svg width="1000" height="1000"
     3      xmlns="http://www.w3.org/2000/svg"
     4      xmlns:xlink="http://www.w3.org/1999/xlink">
     5 
     6 
     7     <style type="text/css">
     8 	rect.ne {
     9 	fill:  url(#ne_prechod);
    10 	stroke: black;
    11 	}
    12 	rect.ano {
    13 	fill: url(#ano_prechod);
    14 	stroke: black;
    15 	}
    16 
    17 	a:hover rect.ano, a:hover rect.ne {
    18 	fill: url(#zvyrazneny_prechod);
    19 	}
    20 
    21 	a:hover text {
    22 	fill: green;
    23 	}
    24 
    25 	line.ramecek {
    26 	stroke: black;
    27 	stroke-width: 2;
    28 	}
    29 
    30 
    31 	rect.pozadi {
    32 	fill: url(#pozadi_prechod);
    33 	}
    34 
    35 	text {
    36 	font-size: 12px;
    37 	font-family: Sans;
    38 	}
    39 
    40     </style>
    41 
    42     <!-- pozadí – přechod -->
    43     <defs>
    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"/>
    47 	</linearGradient>
    48     </defs>
    49 
    50     <!-- nekuřácký graf – přechod -->
    51     <defs>
    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"/>
    55 	</linearGradient>
    56     </defs>
    57 
    58     <!-- zvýrazněný graf – přechod -->
    59     <defs>
    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"/>
    63 	</linearGradient>
    64     </defs>
    65 
    66     <!-- kuřácký graf – přechod -->
    67     <defs>
    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"/>
    71 	</linearGradient>
    72     </defs>
    73 
    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"/>
    77 
    78     <!-- Nadpis grafu -->
    79     <text x="60" y="20">Mělo by se tu:</text>
    80 
    81     <!-- nekuřáci -->
    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"/>
    85     </a>
    86 
    87     <!-- kuřáci -->
    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"/>
    91     </a>
    92 </svg>