html/graf.svg
author František Kučera <franta-hg@frantovo.cz>
Fri Nov 18 22:07:46 2011 +0100 (2011-11-18)
changeset 199 2af6fa1a1833
parent 106 6209f3d550c5
permissions -rw-r--r--
CSS: odstranění mezer mezi bloky
franta-hg@60
     1
<?xml version="1.0"?>
franta-hg@60
     2
<svg width="1000" height="1000"
franta-hg@60
     3
     xmlns="http://www.w3.org/2000/svg"
franta-hg@60
     4
     xmlns:xlink="http://www.w3.org/1999/xlink">
franta-hg@60
     5
franta-hg@60
     6
franta-hg@60
     7
    <style type="text/css">
franta-hg@105
     8
	rect.ne {
franta-hg@105
     9
	fill:  url(#ne_prechod);
franta-hg@105
    10
	stroke: black;
franta-hg@60
    11
	}
franta-hg@105
    12
	rect.ano {
franta-hg@105
    13
	fill: url(#ano_prechod);
franta-hg@105
    14
	stroke: black;
franta-hg@60
    15
	}
franta-hg@105
    16
franta-hg@105
    17
	a:hover rect.ano, a:hover rect.ne {
franta-hg@105
    18
	fill: url(#zvyrazneny_prechod);
franta-hg@105
    19
	}
franta-hg@105
    20
franta-hg@105
    21
	a:hover text {
franta-hg@105
    22
	fill: green;
franta-hg@105
    23
	}
franta-hg@105
    24
franta-hg@105
    25
	line.ramecek {
franta-hg@105
    26
	stroke: black;
franta-hg@105
    27
	stroke-width: 2;
franta-hg@105
    28
	}
franta-hg@105
    29
franta-hg@105
    30
franta-hg@105
    31
	rect.pozadi {
franta-hg@105
    32
	fill: url(#pozadi_prechod);
franta-hg@105
    33
	}
franta-hg@105
    34
franta-hg@105
    35
	text {
franta-hg@105
    36
	font-size: 12px;
franta-hg@105
    37
	font-family: Sans;
franta-hg@105
    38
	}
franta-hg@105
    39
franta-hg@60
    40
    </style>
franta-hg@60
    41
franta-hg@105
    42
    <!-- pozadí – přechod -->
franta-hg@105
    43
    <defs>
franta-hg@105
    44
	<linearGradient id="pozadi_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
franta-hg@107
    45
	    <stop offset="20%" style="stop-color:rgb(245,245,255); stop-opacity:0.5"/>
franta-hg@106
    46
	    <stop offset="100%" style="stop-color:silver; stop-opacity:0.8"/>
franta-hg@105
    47
	</linearGradient>
franta-hg@105
    48
    </defs>
franta-hg@60
    49
franta-hg@105
    50
    <!-- nekuřácký graf – přechod -->
franta-hg@105
    51
    <defs>
franta-hg@105
    52
	<linearGradient id="ne_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
franta-hg@105
    53
	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
franta-hg@105
    54
	    <stop offset="100%" style="stop-color:blue; stop-opacity:1"/>
franta-hg@105
    55
	</linearGradient>
franta-hg@105
    56
    </defs>
franta-hg@60
    57
franta-hg@105
    58
    <!-- zvýrazněný graf – přechod -->
franta-hg@105
    59
    <defs>
franta-hg@105
    60
	<linearGradient id="zvyrazneny_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
franta-hg@105
    61
	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
franta-hg@105
    62
	    <stop offset="100%" style="stop-color:green; stop-opacity:1"/>
franta-hg@105
    63
	</linearGradient>
franta-hg@105
    64
    </defs>
franta-hg@60
    65
franta-hg@105
    66
    <!-- kuřácký graf – přechod -->
franta-hg@105
    67
    <defs>
franta-hg@105
    68
	<linearGradient id="ano_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
franta-hg@105
    69
	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
franta-hg@105
    70
	    <stop offset="100%" style="stop-color:red; stop-opacity:1"/>
franta-hg@105
    71
	</linearGradient>
franta-hg@105
    72
    </defs>
franta-hg@60
    73
franta-hg@105
    74
    <!-- pozadí a linka -->
franta-hg@105
    75
    <rect x="0" y="0" width="200" height="200" class="pozadi"/>
franta-hg@105
    76
    <line x1="10" y1="180" x2="190" y2="180" class="ramecek"/>
franta-hg@105
    77
franta-hg@105
    78
    <!-- Nadpis grafu -->
franta-hg@105
    79
    <text x="60" y="20">Mělo by se tu:</text>
franta-hg@105
    80
franta-hg@105
    81
    <!-- nekuřáci -->
franta-hg@105
    82
    <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx nekouřit">
franta-hg@105
    83
	<text x="30" y="195" class="ne">nekouřit</text>
franta-hg@105
    84
	<rect x="30" y="30" width="50" height="150" class="ne"/>
franta-hg@105
    85
    </a>
franta-hg@105
    86
franta-hg@105
    87
    <!-- kuřáci -->
franta-hg@105
    88
    <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx kouřit">
franta-hg@105
    89
	<text x="130" y="195" class="ano">kouřit</text>
franta-hg@105
    90
	<rect x="120" y="30" width="50" height="150" class="ano"/>
franta-hg@105
    91
    </a>
franta-hg@60
    92
</svg>