Beispiel:SVG-data-1.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 {
  stroke: var(--black);
  stroke-width: 1;
  transition: fill .3s ease;
  cursor: pointer;
}
.bar > text {
  font-family: Helvetica, sans-serif;
  font-size: 24px;
}
.red {
  fill: var(--red);
}
.orange {
  fill: var(--orange);
}
.yellow {
  fill: var(--yellow);
}
.green {
  fill: var(--green);
}
.blue {
  fill: var(--blue);
}
.purple {
  fill: var(--purple);
}
.bar:hover,
.bar:focus {
  fill: var(--bgcolor);
}
.bar:hover text,
.bar:focus text {
  stroke: var(--accent);	
  stroke: #c32e04;
}

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 - 1</title>
</head>

<body>
<h1>Diagramm - 1<br>Balkendiagramm</h1>


<h2>Unsere Ernte</h2>
<svg class="chart" width="450" height="300" aria-labelledby="chartinfo" viewBox="0 0 450 300">
  <desc id="chartinfo">Ein Diagramm unserer Ernte</desc>
    <defs>
    <symbol id="bar">
      <rect width="10" height="45" />
    </symbol>    
  </defs>
  <g class="bar purple" tabindex="0">
    <rect width="40" height="45" />
    <text x="55" y="40">4 Pflaumen</text>
  </g>
  <g class="bar green" tabindex="0">
    <rect width="80" height="45" y="50" />
    <text x="95" y="90" >8 Kiwis</text>
  </g>
  <g class="bar yellow" tabindex="0">
    <rect width="150" height="45" y="100" />
    <text x="160" y="140" >15 Zitronen</text>
  </g>
  <g class="bar orange" tabindex="0">
    <rect width="160" height="45" y="150" />
    <text x="170" y="190" >16 Orangen</text>
  </g>
  <g class="bar red" tabindex="0">
    <rect width="230" height="45" y="200" />
    <text x="245" y="240" >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-1.html&oldid=89251“