Beispiel:CSS-mask-7.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" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> 
 <style>

svg { 

 background: white;
 border: thin dotted steelBlue;
 width: 96%;
 }

text { 

stroke: none; 
fill: black;
font-size: 100px;

} 

 </style>
 <title>SVG - Mask-3</title>

</head>

<body> <svg viewBox="0 0 880 120" >

<defs> 

   <linearGradient id="Verlauf1"
                   x1="0%"   y1="0%"
                   x2="100%" y2="0%">
       <stop offset="0%"   stop-color="white"/>
       <stop offset="100%" stop-color="black"/>
   </linearGradient>

   <mask id="Maske3" x="0" y="0" width="800" height="120" >
       <rect x="0" y="0"  width="800" height="120"
          fill="url(#Verlauf1)"/>
   </mask>

</defs>

<text x="10" y="100" > 

   Text im Hintergrund

</text> <rect x="1" y="1" width="800" height="120" 

   style="fill: steelBlue; mask: url(#Maske3)"/>

</svg>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-mask-7.html&oldid=98508“