SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:SVG-text-mehrzeilige-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:SELFHTML-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 &lt;tspan>-Elemente notieren.</tspan>
	<tspan x="10" dy="2em">Allerdings sind diese Zeilen nicht responsiv.</tspan>
</text>  


</svg> 
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-text-mehrzeilige-2.html&oldid=86852“