Beispiel:SVG-Filter-feTurbulence-2.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 {
width: 96%;
height: 650px;
padding:0;
}
text {
font-family: sans-serif;
font-size: 13px;
}
tspan {
font-style: italic;
fill: #337599;
}
</style>
<title>SVG-Filter feTurbulence</title>
</head>
<body>
<h1>SVG-Filter feTurbulence in Kombination mit feColorMatrix und feConvolveMatrix</h1>
<svg viewBox="0 100 680 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 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 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 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 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 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 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 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 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 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 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 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 href="#rechteck" style="filter: url(#turb18);"/>
<text x="0" y="40">+ feColorMatrix</text>
<text x="0" y="60">+ feConvolveMatrix </text>
</g>
</svg>
</body>
</html>
