Beispiel:CSS-mask-5.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">
	<title>Maskierung - Referenzieren einer SVG-Grafik</title>
<style>
.bubbles1 {
  -webkit-mask-image: url(#mask1);
  mask-image: url(#mask1);
  mask-size:100%
}

.bubbles2 {
  -webkit-mask-image: url(#mask2);
  mask-image: url(#mask2);
  mask-size:100%
}

img {width:450px;}

#galerie {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));;
  gap: 1em; 
  padding: 0;
}

figure {width: 100%;}

</style>
</head>
<body>
<h1>Maskierung - Referenzieren einer SVG-Grafik</h1>
<div id="galerie">
	<figure>
		<img class="bubbles1" src="https://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz">
        <figcaption>statisch</figcaption>
	</figure>
	<figure>
		<img class="bubbles2" src="https://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz">
        <figcaption>animiert (startet mit Reload der Seite!)</figcaption>
	</figure>
</div>		

<svg width="0" height="0" viewBox="0 0 450 450">
  <defs>
    <mask id="mask1">
      <rect fill="black" x="0" y="0" width="450" height="450" />
      <circle fill="#FFFFFF" r="50" />
      <circle fill="#FFFFFF" cx="125" cy="125" r="100" />
      <circle fill="#FFFFFF" cx="225" cy="300" r="100" />
      <circle fill="#FFFFFF" cx="350" cy="50" r="90" />
      <circle fill="#FFFFFF" cx="100" cy="400" r="100" />
      <circle fill="#FFFFFF" cx="400" cy="400" r="100" />	  	  
    </mask>
	
    <mask id="mask2">
      <rect fill="black" x="0" y="0" width="450" height="450" />
      <circle fill="#FFFFFF" cx="100" cy="100" r="0">
	  	<animate 
		attributeName="r" 
		to="200" 
		dur="3s" 
		fill="freeze"
		/></circle>
      <circle fill="#FFFFFF" cx="225" cy="300" r="5" >
	  	<animate 
		attributeName="r" 
		begin="1s"
		to="200" 
		dur="6s" 
		fill="freeze"		
		/></circle>
      <circle fill="#FFFFFF" cx="350" cy="50" r="10" >
	  	<animate 
		attributeName="r" 
		begin="0.5s"
		to="450" 
		dur="5s" 
		fill="freeze"
		/></circle>
      <circle fill="#FFFFFF" cx="100" cy="350" r="5" >
	  	<animate 
		attributeName="r" 
		begin="1.5s"
		to="150" 
		dur="5s" 
		fill="freeze"
		/></circle>	  
	  
    </mask>	
  </defs>
</svg>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-mask-5.html&oldid=98506“