Beispiel:SVG-text-4.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 { 

 border: thin solid;
--bgcolor: #e6f2f7; 
 --blue: #337799;
 --yellow: #dfac20;
 --green: #8db243; 
 --accent: #c82f04;

}

text { 

 font-family:sans-serif;	
 font-size: 24px;

}

svg a { cursor: pointer; fill: var(--blue); text-decoration: underline; }

a:focus, a:hover { fill: var(--bgcolor); stroke: var(--blue); stroke-width: 1; }

[role=heading] { font-size: 50px; text-anchor: middle; fill: var(--yellow); stroke: var(--blue); stroke-width: 2; }

[role=heading] >tspan { fill: var(--red); }

text.mehrzeilig tspan { 

 x: 20;
 dy: 2em;

} 


 </style>
 <title>mehrzeiliger Text in SVG</title>

</head>

<body>

<svg viewBox="0 0 800 400">

<text role="heading" x="400" y="60"> <tspan>SVG-Text: </tspan> mehrzeiliger Text </text>

<text class="mehrzeilig" x="20" y="130"> <tspan x="10" dy="2em">Mehrzeiliger Text ist möglich, wenn Sie</tspan> <tspan x="10" dy="2em">die einzelnen Zeilen in <tspan>-Elemente notieren.</tspan> <tspan x="10" dy="2em">Allerdings sind diese Zeilen nicht responsiv.</tspan> </text>


</svg> </body> </html>

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