Beispiel:CSS-uebergross-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Stauchung mit SVG</title>
  <style>
text {
	font-size: 60px;
	fill:#c32e04;
}

.box {
	color: #c32e04;
	font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
	font-weight: bold;
  border: medium solid black;
  padding: 3px;
  width: 150px;
}

body{
  display: grid;
  grid-template-columns: repeat(auto-fill, 16em);
}

h1 {
	grid-column: 1 / -1;
}

  </style>	
</head>
 
<body>
<h1>Stauchung mit SVG</h1>

<figure>  
	<p class="box" lang="en">
		<svg viewBox="0 0 150 150">
			<text x="0" y="33%">SVG</text>
			<text x="0" y="66%">is</text>
			<text x="0" y="99%" textLength="100%" lengthAdjust="spacingAndGlyphs">Awesome</text>
		</svg>
	</p>
	<figcaption>lengthAdjust="spacingAndGlyphs"<br>textLength="100%"</figcaption>
</figure>

</body>
</html>