Beispiel:SVG-text-1.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>
svg {
width: 100%;
height: 250px;
}
text {
font-family:serif;
font-size: 120px;
font-weight: bold;
}
#eins {
fill: url(#verlauf);
}
tspan {
font-size: 90px;
}
#zwei {
fill: #ffebe6;
stroke: #c82f04;
stroke-width: 3;
font-family: sans-serif;
font-size: 160px;
font-weight: bold;
}
</style>
<title>Beispiel: Text in SVG</title>
</head>
<body>
<h1>Text in SVG</h1>
<svg viewBox="0 0 750 250">
<defs>
<linearGradient id="verlauf">
<stop offset="0.1" stop-color="#306f91 "/>
<stop offset="0.1" stop-color="#dfac20 "/>
<stop offset=".64" stop-color="#dfac20 "/>
<stop offset=".80" stop-color="#306f91 "/>
</linearGradient>
</defs>
<text id="eins" x="10" y="120"> TEXT
<tspan dx="-40" dy=".5em">in</tspan>
</text>
<circle cx="10" cy="120" r="3" style="fill:#c32e04" />
<path d="M10,120 h300" style="stroke:#c32e04;stroke-width:1;" />
<text id="zwei" x="400 520 620" y="120 170 220"> SVG </text>
</svg>
<p>Die Grundlinie ist durch die dünne rote Linie gekennzeichnet. Bei einem y-Wert von 0 wäre der Text oberhalb des Anzeigebereichs.</p>
</body>
</html>