Beispiel:CSS-mask-9.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
svg {
background: white;
border: thin dotted steelBlue;
width: 96%;
}
</style>
<title>SVG - Mask-4</title>
</head>
<body>
<svg viewBox="0 0 950 500" >
<defs>
<lineargradient id="Verlauf1"
x1="0%" y1="0%"
x2="100%" y2="0%">
<stop offset="0%" stop-color="white"/>
<stop offset="80%" stop-color="black"/>
</lineargradient>
<radialGradient id="Verlauf2">
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</radialGradient>
<mask id="Maske4">
<circle cx="200" cy="200" r="200"
fill="url(#Verlauf1)" />
</mask>
<mask id="Maske5">
<circle cx="200" cy="200" r="200"
fill="url(#Verlauf2)" />
</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(#Maske4)">
<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(#Maske5)">
<title>Lauf an der Pegnitz - normal ohne Filter</title>
</image>
</svg>
</body>
</html>