Beispiel:CSS-mask-8.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 #337799;
 width: 96%;
 padding:0;
 height: 500px;
 }

text { 

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

} 

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

</head>

<body>

<svg viewBox="0 0 950 500" > 

 <defs>
   <filter id="Filter1" x="-.33" y="-.33" width="1.5" height="1.5">
     <feGaussianBlur stdDeviation="15"/>
   </filter>

   <mask id="Maske6" x="0" y="0" width="400" height="400">
     <circle cx="200" cy="200" r="175"

fill="white" filter="url(#Filter1)"/> 

   </mask>

   <mask id="Maske7" x="0" y="0" width="400" height="400">
     <rect x="25" y="25" width="350" height="350"

fill="white" filter="url(#Filter1)"/> 

   </mask>
 </defs>

 <image x="0" y="0" width="400px" height="400px" transform="translate(50,0)"
   href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg"

mask="url(#Maske6)"> 

   <title>Lauf an der Pegnitz - normal ohne Filter</title>
 </image>	

 <image x="0" y="0" width="400px" height="400px" transform="translate(500,0)"
   href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg"

mask="url(#Maske7)"> 

   <title>Lauf an der Pegnitz - normal ohne Filter</title>
 </image>

</svg>

</body> </html>

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