SVG graf – hlasování: kouřit/nekouřit
authorFrantišek Kučera <franta-hg@frantovo.cz>
Tue, 27 Apr 2010 11:15:36 +0200
changeset 105f9c0ce760189
parent 104 e774a42b8e2a
child 106 6209f3d550c5
SVG graf – hlasování: kouřit/nekouřit
html/graf.svg
     1.1 --- a/html/graf.svg	Wed Apr 14 00:40:51 2010 +0200
     1.2 +++ b/html/graf.svg	Tue Apr 27 11:15:36 2010 +0200
     1.3 @@ -15,20 +15,88 @@
     1.4      -->
     1.5  
     1.6      <style type="text/css">
     1.7 -	rect.nekuracka {
     1.8 -	    fill: blue;
     1.9 -	    stroke: black;
    1.10 +	rect.ne {
    1.11 +	fill:  url(#ne_prechod);
    1.12 +	stroke: black;
    1.13  	}
    1.14 -	rect.kuracka {
    1.15 -	    fill: red;
    1.16 -	    stroke: black;
    1.17 +	rect.ano {
    1.18 +	fill: url(#ano_prechod);
    1.19 +	stroke: black;
    1.20  	}
    1.21 +
    1.22 +	a:hover rect.ano, a:hover rect.ne {
    1.23 +	fill: url(#zvyrazneny_prechod);
    1.24 +	}
    1.25 +
    1.26 +	a:hover text {
    1.27 +	fill: green;
    1.28 +	}
    1.29 +
    1.30 +	line.ramecek {
    1.31 +	stroke: black;
    1.32 +	stroke-width: 2;
    1.33 +	}
    1.34 +
    1.35 +
    1.36 +	rect.pozadi {
    1.37 +	fill: url(#pozadi_prechod);
    1.38 +	}
    1.39 +
    1.40 +	text {
    1.41 +	font-size: 12px;
    1.42 +	font-family: Sans;
    1.43 +	}
    1.44 +
    1.45      </style>
    1.46  
    1.47 +    <!-- pozadí – přechod -->
    1.48 +    <defs>
    1.49 +	<linearGradient id="pozadi_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
    1.50 +	    <stop offset="0%" style="stop-color:silver; stop-opacity:1"/>
    1.51 +	    <stop offset="100%" style="stop-color:gray; stop-opacity:1"/>
    1.52 +	</linearGradient>
    1.53 +    </defs>
    1.54  
    1.55 -    <rect x="10" y="10" width="100" height="400" class="nekuracka"/>
    1.56 -    <rect x="150" y="10" width="100" height="400" class="kuracka"/>
    1.57 +    <!-- nekuřácký graf – přechod -->
    1.58 +    <defs>
    1.59 +	<linearGradient id="ne_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
    1.60 +	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
    1.61 +	    <stop offset="100%" style="stop-color:blue; stop-opacity:1"/>
    1.62 +	</linearGradient>
    1.63 +    </defs>
    1.64  
    1.65 +    <!-- zvýrazněný graf – přechod -->
    1.66 +    <defs>
    1.67 +	<linearGradient id="zvyrazneny_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
    1.68 +	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
    1.69 +	    <stop offset="100%" style="stop-color:green; stop-opacity:1"/>
    1.70 +	</linearGradient>
    1.71 +    </defs>
    1.72  
    1.73 +    <!-- kuřácký graf – přechod -->
    1.74 +    <defs>
    1.75 +	<linearGradient id="ano_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
    1.76 +	    <stop offset="0%" style="stop-color:white; stop-opacity:1"/>
    1.77 +	    <stop offset="100%" style="stop-color:red; stop-opacity:1"/>
    1.78 +	</linearGradient>
    1.79 +    </defs>
    1.80  
    1.81 +    <!-- pozadí a linka -->
    1.82 +    <rect x="0" y="0" width="200" height="200" class="pozadi"/>
    1.83 +    <line x1="10" y1="180" x2="190" y2="180" class="ramecek"/>
    1.84 +
    1.85 +    <!-- Nadpis grafu -->
    1.86 +    <text x="60" y="20">Mělo by se tu:</text>
    1.87 +
    1.88 +    <!-- nekuřáci -->
    1.89 +    <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx nekouřit">
    1.90 +	<text x="30" y="195" class="ne">nekouřit</text>
    1.91 +	<rect x="30" y="30" width="50" height="150" class="ne"/>
    1.92 +    </a>
    1.93 +
    1.94 +    <!-- kuřáci -->
    1.95 +    <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="xxx kouřit">
    1.96 +	<text x="130" y="195" class="ano">kouřit</text>
    1.97 +	<rect x="120" y="30" width="50" height="150" class="ano"/>
    1.98 +    </a>
    1.99  </svg>
   1.100 \ No newline at end of file