Beispiel:CSS-uebergross-5.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>Maskierung  mit SVG</title>
  <style>
text {
	font-size: 60px;
}

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

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

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

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

<figure>  
	<svg viewBox="0 0 260 150">
		<defs>
			<mask id="Maske" maskUnits="userSpaceOnUse" x="0" y="0" width="160" height="160">
				<rect x="0" y="0" width="160" height="160" fill="white" /> 
			</mask>
			<g id="text">
				<text x="0" y="32%">SVG</text>
				<text x="0" y="64%">is</text>
				<text x="0" y="96%">Awesome</text>
			</g>	
		</defs>
		
		<!-- Hintergrund: rechteck mit schwarzer Füllung (Standardwert) -->
		<rect x="0" y="0" width="160" height="160" />
		<!-- Text wird doppelt benötigt:
	 			1. schwarzer Text ohne Maske
        2. weißer Text mit Maske -->
		<use href="#text" fill="black" />
		<use href="#text" fill="white" mask="url(#Maske)" />
	</svg>

	<figcaption></figcaption>
</figure>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-uebergross-5.html&oldid=83078“