Beispiel:CSS-mask-8.html
Aus SELFHTML-Wiki
<!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>