Beispiel:SVG-Kreisdiagramm.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Konstruktion eines Kreisdiagramms</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
svg {
border: thin solid;
--bgcolor: #e6f2f7;
--blue: #337599;
--yellow: #dfac20;
--orange: #df6c20;
--green: #8db243;
--red: #c82f04;
--purple: #8c4bb4;
--black: #113;
}
text {
font-size: 10px;
}
.center {
text-anchor: middle;
}
tspan {
font-weight: bold;
font-size: 12px;
}
path {
stroke-width: 3;
fill:none;
}
.cons {
marker-start: url(#dot);
}
.pointing {
stroke-dasharray:1 1;
marker-end:url(#tipE);
}
.dot {
stroke-width: 1;
stroke: #306f91;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {});
</script>
</head>
<body>
<h1>Konstruktion eines Kreisdiagramms</h1>
<svg class="chart" width="500" height="400" aria-labelledby="chartinfo" viewBox="-105 -100 250 200">
<title>Tortenstück eines Tortendiagrams</title>
<desc id="chartinfo">Die Konstruktion eines Tortenstücks mit 60 °</desc>
<defs>
<marker id="dot" markerWidth="1" markerHeight="1" viewBox="0 0 2 2" refX="1" refY="1" orient="auto">
<circle cx="1" cy="1" r="1" class="dot"/>
</marker>
<marker id="tipE" markerWidth="5" markerHeight="5" viewBox="0 0 10 10" refX="10" refY="5" orient="auto">
<path d="m0,0 l10,5 l-10,5z" style="fill:context-stroke"/>
</marker>
</defs>
<g>
<circle id="kreis" r="80" style="fill:none;stroke:grey;stroke-width:0.5;stroke-dasharray: 2 2"/>
<g>
<title>Tortenstück 60 ° entsprechend 1/6 ≈ 16.66… %</title>
<text x="0" y="12.5" lang="en"><tspan fill="#306f91">M</tspan>(ove to) 0,0</text>
<path d="M0,0 v-80" class="cons" stroke="#c32e04"/>
<text x="-5" y="-30" style="text-anchor:end" lang="en"><tspan fill="#c32e04">v</tspan>(ertically) -80</text>
<path d="M0,-80 a80,80 0 0,1 69.282032302755091741097853660235,40" class="cons" stroke="#dfac20" fill="none"/>
<text x="30" y="-80" lang="en"><tspan fill="#dfac20">a</tspan>(rc) 80,80 0 0,1 69.3,40</text>
<text x="80" y="-65">= 60 °</text>
<path d="M69.282032302755091741097853660235,-40 L0,0" class="cons pointing" style="stroke:#8db243"/>
<text x="50" y="-12" class="center"><tspan fill="#8db243">Z</tspan></text>
<text x="50" y="0" class="center" lang="en">(close path)</text>
</g>
</g>
</svg>
</body>
</html>
