Beispiel:SVG-text-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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 { 

--bgcolor: #e6f2f7; 
 --blue: steelblue;
 --yellow: gold;
 --green: #8db243; 
 --accent: firebrick;

}

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>Text in SVG</title>

</head>

<body> <svg viewBox="0 0 800 300">

<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>

Abgerufen am 29.05.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-text-2.html"