Beispiel:SVG-Filter-feTurbulence-2.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" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />  
  <style>
svg {
  width: 96%;
  height: 650px;
  padding:0;
  margin:0;
  background: white;
}

text {
   font-family: sans-serif; 
   font-size: 10pt;
}

tspan {
  font-style: italic;
  fill: #3983ab;
}	

</style>
<title>SVG-Filter feTurbulence</title>
</head>

<body>

<h1>SVG-Filter feTurbulence in Kombination mit feColorMatrix und feConvolveMatrix</h1>

<main>

<svg viewBox="0 0 880 650">
<defs>
  <symbol id="rechteck">
    <rect x="10" y="80" width="100" height="100"/>
  </symbol>
  	
  <filter id="turb1">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.01"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb2">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.02"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb3">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.05"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb4">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
    <filter id="turb5">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.01"
      numOctaves="1"
      in="SourceGraphic"/>
	<feColorMatrix type="saturate" values="0" />
  </filter>
  
  <filter id="turb15">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.01"
      numOctaves="1"
      in="SourceGraphic"/>
	<feColorMatrix type="saturate" values="10" />
  </filter>
  
  <filter id="turb6">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.02"
      numOctaves="1"
      in="SourceGraphic"/>
	 <feColorMatrix type="saturate" values="4" />
  </filter>
  
  <filter id="turb16">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.02"
      numOctaves="1"
      in="SourceGraphic"/>
	 <feColorMatrix type="saturate" values="4" />
	 <feConvolveMatrix 
        order="3" 
        preserveAlpha="true" 
        kernelMatrix="
		   0 -1  0 
		  -1  5 -1 
		   0 -1  0"/>  
  </filter>
  
  <filter id="turb7">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.05"
      numOctaves="1"
      in="SourceGraphic"/>
	<feColorMatrix type="saturate" values="4" />	  
  </filter>
  
  <filter id="turb17">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.02"
      numOctaves="1"
      in="SourceGraphic"/>
	 <feColorMatrix type="saturate" values="10" />	  
	 <feConvolveMatrix 
        order="3" 
        preserveAlpha="true" 
        kernelMatrix="
		   2 -2  2 
		  -2  -.1 -2 
		   2 -2  2"/>  	  
  </filter>  
  
  <filter id="turb8">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
	  <feColorMatrix type="saturate" values="10" />
  </filter>
  
  <filter id="turb18">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
	  <feColorMatrix type="saturate" values="10" />
	 <feConvolveMatrix 
        order="3" 
        preserveAlpha="true" 
        kernelMatrix="
		   1 -1  1 
		  -1  -.1 -1 
		   1 -1  1"/> 
  </filter>

  

</defs>


  <g transform="translate(50,20)">
    <use xlink:href="#rechteck" style="filter: url(#turb1);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.01</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>

  <g transform="translate(200,20)">
    <use xlink:href="#rechteck" style="filter: url(#turb2);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.02</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>
  
  <g transform="translate(350,20)">
    <use xlink:href="#rechteck" style="filter: url(#turb3);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.05</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>
  
  <g transform="translate(500,20)">
    <use xlink:href="#rechteck" style="filter: url(#turb4);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>
  
  <g transform="translate(50,220)">
    <use xlink:href="#rechteck" style="filter: url(#turb5);"/>
    <text x="0" y="20">+ feColorMatrix</text>
    <text x="0" y="40">type="<tspan>saturate</tspan>"</text>
    <text x="0" y="60">values="<tspan>0</tspan>"</text>
  </g>

  <g transform="translate(200,220)">
    <use xlink:href="#rechteck" style="filter: url(#turb6);"/>
    <text x="0" y="20">+ feColorMatrix</text>
    <text x="0" y="40">type="<tspan>saturate</tspan>"</text>
    <text x="0" y="60">values="<tspan>4</tspan>"</text>
  </g>
  
  <g transform="translate(350,220)">
    <use xlink:href="#rechteck" style="filter: url(#turb7);"/>
    <text x="0" y="20">+ feColorMatrix</text>
    <text x="0" y="40">type="<tspan>saturate</tspan>"</text>
    <text x="0" y="60">values="<tspan>4</tspan>"</text>
  </g>
  
  <g transform="translate(500,220)">
    <use xlink:href="#rechteck" style="filter: url(#turb8);"/>
    <text x="0" y="20">+ feColorMatrix</text>
    <text x="0" y="40">type="<tspan>saturate</tspan>"</text>
    <text x="0" y="60">values="<tspan>10</tspan>"</text>
  </g>
  
  <g transform="translate(50,420)">
    <use xlink:href="#rechteck" style="filter: url(#turb15);"/>
    <text x="0" y="20">+ feColorMatrix</text>
    <text x="0" y="40">type="<tspan>saturate</tspan>"</text>
    <text x="0" y="60">values="<tspan>10</tspan>"</text>
  </g>

  <g transform="translate(200,420)">
    <use xlink:href="#rechteck" style="filter: url(#turb16);"/>
    <text x="0" y="40">+ feColorMatrix</text>
    <text x="0" y="60">+ feConvolveMatrix </text>
  </g>
  
  <g transform="translate(350,420)">
    <use xlink:href="#rechteck" style="filter: url(#turb17);"/>
    <text x="0" y="40">+ feColorMatrix</text>
    <text x="0" y="60">+ feConvolveMatrix </text>
  </g>
  
  <g transform="translate(500,420)">
    <use xlink:href="#rechteck" style="filter: url(#turb18);"/>
    <text x="0" y="40">+ feColorMatrix</text>
    <text x="0" y="60">+ feConvolveMatrix </text>
  </g>
  

</svg>

</main>

</body>
</html>