Beispiel:SVG-data-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
	<style>
.bar > rect {
	width: 45px;
	height: calc(var(--value) * 10px); 
	x: calc(var(--n) * 50px);
	y: calc((30 - var(--value)) * 10px);	
}

.bar {
	fill: var(--color);
  stroke: var(--black);
  stroke-width: 1;
  transition: fill .3s ease;
  cursor: pointer;
}

.bar:nth-of-type(1) { --n: 1; }
.bar:nth-of-type(2) { --n: 2; }
.bar:nth-of-type(3) { --n: 3; }
.bar:nth-of-type(4) { --n: 4; }
.bar:nth-of-type(5) { --n: 5; }

.bar > text {
  font-family: Helvetica, sans-serif;
  font-size: 24px;
}

.bar:hover,
.bar:focus {
  fill: var(--bgcolor);
}
.bar:hover text,
.bar:focus text {
  stroke: var(--red);
}

svg {
  height: 300px;
  border: thin solid;
 --bgcolor: #e6f2f7; 
  --blue: #337599;
  --yellow: #dfac20;
  --orange: #df6c20;
  --green: #8db243; 
  --red: #c82f04;  
  --purple: #8c4bb4;
  --black: #113;
}

	</style>
	<script>
document.addEventListener('DOMContentLoaded', function () {

});
	</script>

	<title>Diagramm - 2</title>
</head>

<body>
<h1>Diagramm - 2<br>Säulendiagramm</h1>


<h2>Unsere Ernte - das gleiche in grün</h2>
<svg class="chart" width="450" height="300" aria-labelledby="chartinfo" viewBox="-30 0 450 300">
  <desc id="chartinfo">Ein Diagramm unserer Ernte</desc>

  <g class="bar" tabindex="0" style="--value: 4; --color: var(--purple);">
    <rect />
    <text x="-25"  y="250">4 Pflaumen</text>
  </g>
  <g class="bar" tabindex="0" style="--value: 8;--color: var(--green);">
    <rect />
    <text x="50" y="200" >8 Kiwis</text>
  </g>
  <g class="bar" tabindex="0" style="--value: 15; --color: var(--yellow);">
    <rect />
    <text x="70"  y="140" >15 Zitronen</text>
  </g>
  <g class="bar" tabindex="0" style="--value: 16; --color: var(--orange);">
    <rect />
    <text x="120" y="115" >16 Orangen</text>
  </g>
  <g class="bar" tabindex="0" style="--value: 23; --color: var(--red);">
    <rect/>
    <text x="199" y="60" >23 Äpfel</text>
  </g>
</svg>

<p>Dieses SVG ist <b>für alle</b> zugänglich:</p>
<ul>
<li>Text ist Text und damit für Menschen, Screenreader und Suchmaschinen les- und markierbar!</li>
<li>Die einzelnen Balken sind mit Maus und Tastatur anklick- und tab-bar!</li>
</ul>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-data-2.html&oldid=89252“