Beispiel:SVG-text-2.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">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
svg {
border: thin solid;
--bgcolor: #e6f2f7;
--blue: #337799;
--yellow: #dfac20;
--green: #8db243;
--accent: #c82f04;
}
text {
font-family:sans-serif;
font-size: 24px;
}
[role=heading] {
font-size: 50px;
text-anchor: middle;
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 2;
paint-order: stroke fill
}
[role=heading] >tspan {
fill: var(--accent);
}
.serif {
font-family:courier, serif;
font-weight: bold;
fill: var(--bgcolor);
stroke: var(--blue);
stroke-width: .5;
}
.italic {
font-style: italic;
fill: var(--green);
}
.bold {
font-weight: bold;
}
.code {
font-family: monospace;
fill: var(--accent);
}
.anders {
text-decoration: underline wavy red;
}
</style>
<title>Beispiel: Text in SVG</title>
</head>
<body>
<svg viewBox="0 0 800 400">
<text role="heading" x="400" y="60">
<tspan>SVG-Text: </tspan>
Formatierung mit
<tspan>CSS</tspan>
</text>
<text x="20" y="130">
<tspan class="serif" >font-family="serif"</tspan>
<tspan x="20" dy="2em" class="italic">font-style="italic"</tspan>
<tspan x="20" dy="2em" class="bold">font-weight="bold"</tspan>
<tspan x="20" dy="2em" class="anders">mal ganz anders</tspan>
</text>
<text x="400" y="130" >
Use of <tspan class="code"><tspan class="code"></tspan>
<tspan x="400" dy="2em">to change <tspan class="code"></tspan></tspan> elements.</tspan>
<tspan x="400" dy="2em"> We can also
<tspan rotate="30">r </tspan><tspan rotate="60">o </tspan>
<tspan rotate="90">t </tspan><tspan rotate="120">a </tspan>
<tspan rotate="40">t </tspan><tspan rotate="90">e </tspan>
</tspan>
<tspan x="400" dy="2em"/>letters.</tspan>
</text>
</svg>
</body>
</html>
