Beispiel:SVG-27b-dominant-baseline.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: sans-serif;
}
text {
dominant-baseline: central;
text-anchor: middle;
font-size: 90px;
}
circle {
fill: none;
stroke-width: 2px;
stroke: steelblue;
}
line {
stroke:#bbb;
}
g ellipse {
fill:none;
stroke: black;
stroke-width: 2;
}
g text { font-size: 24px;
font-weight: bold;
}
</style>
<title>Text vertikal zentrieren mit dominant-baseline</title>
</head>
<body>
<h1>Text vertikal zentrieren mit dominant-baseline</h1>
<p>Text und Kreis haben die selben X und Y Koordinaten.</p>
<svg viewBox="0 0 240 240" width="240px" height="240px">
<line x1="0" y1="120" x2="240" y2="120"/>
<line x1="120" y1="0" x2="120" y2="240"/>
<circle cx="120" cy="120" r="100"/>
<text x="120" y="120">Mitte</text>
</svg>
<h2>Anwendungsbeispiel: KFZ-Nationalitätenkennzeichen</h2>
<svg viewBox="0 0 600 200" width="600px" height="200px">
<g>
<ellipse cx="100" cy="100" rx="40" ry="25"/>
<text x="100" y="100">B</text>
</g>
<g>
<ellipse cx="300" cy="50" rx="40" ry="25"/>
<text x="300" y="50">NL</text>
</g>
<g>
<ellipse cx="500" cy="100" rx="40" ry="25"/>
<text x="500" y="100">LUX</text>
</g>
</svg>
</body>
</html>
