Beispiel:Overflow-5-mask.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">
 <title>Maskierung  mit SVG</title>
 <style>

text { font-size: 60px; }

.box { color: #c82f04; 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>

Maskierung mit SVG

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

<rect x="0" y="0" width="160" height="160" /> <use href="#text" fill="black" /> <use href="#text" fill="white" mask="url(#Maske)" /> </svg>

<figcaption></figcaption> </figure>

</body> </html>

Abgerufen am 21.07.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Overflow-5-mask.html"