Beispiel:SVG-Kreisdiagramm-Ernte.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<title>Beispiel als Kreissegmente</title>
<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>
.segment path {
stroke: var(--black);
stroke-width: 1;
transition: fill .3s ease;
cursor: pointer;
}
.segment text {
font-family: Helvetica, sans-serif;
font-size: 12px;
}
.red {
fill: var(--red);
}
.orange {
fill: var(--orange);
}
.yellow {
fill: var(--yellow);
}
.green {
fill: var(--green);
}
.blue {
fill: var(--blue);
}
.purple {
fill: var(--purple);
}
.segment:hover path,
.segment:focus path {
fill: var(--bgcolor);
}
.segment:hover text,
.segment:focus text {
stroke: var(--accent);
font-weight: bold;
}
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>
</head>
<body>
<h1>Beispiel als Kreissegmente</h1>
<h2>Aufteilung unserer Ernte</h2>
<svg class="chart" width="500" height="400" aria-labelledby="chartinfo" viewBox="-105 -100 250 200">
<title>Gesamternte als Kreissegmente</title>
<desc id="chartinfo">Beispiel mit der Gesamternte an Früchten als Kreissegmente</desc>
<rect x="100" y="-80" width="80" height="90" style="fill:none;stroke:black;stroke-width:1"/>
<g class="segment">
<path d="M0,0 v-80 a80,80 0 0 1 29.732996452826201532144396890281,5.7305653587141911839529020189128z" transform="rotate(0)" class="purple">
<title>4 Pflaumen</title>
</path>
<text x="105" y="-60" class="purple">4 Pflaumen</text>
</g>
<g class="segment">
<path d="M0,0 v-80 a80,80 0 0 1 55.206320918568959173440179150884,22.101276951594387068811381058813z" transform="rotate(21.81818181818182)" class="green">
<title>8 Kiwis</title>
</path>
<text x="105" y="-45" class="green">8 Kiwis</text>
</g>
<g class="segment">
<path d="M0,0 v-80 a80,80 0 0 1 79.185715350474618590087363022138,68.61481293813718876449658651069z" transform="rotate(65.45454545454545)" class="yellow">
<title>15 Zitronen</title>
</path>
<text x="105" y="-30" class="yellow">15 Zitronen</text>
</g>
<g class="segment">
<path d="M0,0 v-80 a80,80 0 0 1 79.909387134640638133013806392675,76.193446734100616204017020477481z" transform="rotate(147.27272727272728)" class="orange">
<title>16 Orangen</title>
</path>
<text x="105" y="-15" class="orange">16 Orangen</text>
</g>
<g class="segment">
<path d="M0,0 v-80 a80,80 0 0 1 65.166076164026856622368886313577,126.40455276569585433575849055202z" transform="rotate(234.54545454545456)" class="red">
<title>23 Äpfel</title>
</path>
<text x="105" y="0" class="red">23 Äpfel</text>
</g>
</svg>
<p>Dieses SVG ist <strong>für alle</strong> zugänglich:</p>
<ul>
<li>Text ist Text und damit für Menschen, Screenreader und Suchmaschinen les- und markierbar!</li>
<li>Die einzelnen Kreissegmente sind mit Maus und Tastatur anklick- und tab-bar!</li>
<li>Die Kreissegmente und die Einträge in der Legende werden jeweils gemeinsam hervorgehoben.
</ul>
</body>
</html>
