Filters

Dit zijn niet alle filters! Andere filters worden nog toegevoegd.
  1. Filters
  2. feSpecularLighting
    1. feDistantLight
    2. fePointLight
    3. feSpotLight
  3. feImage
  4. feBlend
  5. feOffset
  6. feMorphology
  7. feColorMatrix
In svg kan u met de <filter></filter>-tag die u tussen <defs> en </defs> filters maken. Deze tag heeft de volgende attributen:
Attribuut verplicht waarde uitleg
filterUnits ja userSpaceOnUse|objectBoundingBox Definieert het coördinatensysteem (bij userSpaceOnUse is het nulpunt het nulpunt de SVG, bij objectBoundingBox is het nulpunt het nulpunt van het object waarop de filter wordt toegepast).
primitiveUnits ja userSpaceOnUse|objectBoundingBox Specificeert het coördinatensysteem voor lengten.
x nee coördinaat x-coördinaat van het vlak waarin de filter kan toegepast worden.
y nee coördinaat y-coördinaat van het vlak waarin de filter kan toegepast worden.
height nee lengte Hoogte van het vlak waarin de filter kan toegepast worden.
width nee lengte Breedte van het vlak waarin de filter kan toegepast worden.
Een filter bestaat uit tags die elk iets aan de afbeelding veranderen (subfilters). Al deze subfilters beginnen met fe en hebben de volgende attributen:
Attribuut uitleg
in Afbeelding die door de subfilter moet worden aangepast. Kan SourceAlpha (alpha-kanaal van de afbeelding waarop de filter wordt toegepast), SourceGraphic (Afbeelding waarop de filter wordt toegepast) of het resultaat van een andere subfilter.
result Afbeelding na aanpassing door subfilter.
x x-coördinaat van de rechthoek waarop de subfilter moet worden toegepast.
y y-coördinaat van de rechthoek waarop de subfilter moet worden toegepast.
width Breedte van de rechthoek waarop de subfilter moet worden toegepast.
height Hoogte van de rechthoek waarop de subfilter moet worden toegepast.

feSpecularLighting

Deze filter gebruikt u om lichtbron te maken. Deze tag heeft de volgende attributen:
Attribuut verplicht waarde uitleg
surfaceScale nee getal Lichtsterkte.
specularConstant nee getal Grootte van het midden van de lichtbol.
specularExponent nee getal uitleg
lighting-color nee kleur Kleur van het licht.
Tussen <feSpecularLighting> en </feSpecularLighting> plaatst tags voor de lichtbol.

feDistantLight

Deze tag heeft de volgende attributen:
Attribuut verplicht waarde uitleg
azimuth nee getal Hoek van het licht.
elevation nee getal Lichtsterkte.
Bijvoorbeeld:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="361px" height="246px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
<feSpecularLighting in="SourceGraphic" surfaceScale="1" specularConstant="1" specularExponent="16" lighting-color="red">
<feDistantLight azimuth="45" elevation="45" />
</feSpecularLighting>
</filter>
</defs>
<image xlink:href="../../img/bloem.jpg" x="0" y="0" width="361" height="246" />
<g filter="url(#MyFilter)">
</g>
</svg>
(Bekijk dit voorbeeld).

fePointLight

Deze tag heeft de volgende attributen:
Attribuut verplicht waarde uitleg
x nee coördinaat x-coördinaat van de lichtbol.
y nee coördinaat y-coördinaat van de lichtbol.
z nee coördinaat z-coördinaat van de lichtbol.


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="600px" height="200px" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip1" transform="translate(20,100)">
<text x="0" y="0" font-family="Arial Black" font-weight="bold" font-size="80">fepointlight</text>
</clipPath>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="600" height="200">
<feSpecularLighting in="SourceGraphic" surfaceScale="1" specularConstant="1" specularExponent="16" lighting-color="red">
<fePointLight id="f1" x="100" y="100" z="50" />
</feSpecularLighting>
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="black" onmousemove="
evt.target.ownerDocument.getElementById('f1').setAttribute('x',evt.clientX);
evt.target.ownerDocument.getElementById('f1').setAttribute('y',evt.clientY);
" />
<g clip-path="url(#clip1)" filter="url(#MyFilter)">
</g>
</svg>
(Bekijk dit voorbeeld).

feSpotLight

Deze tag heeft de volgende attributen:
Attribuut verplicht waarde uitleg
limitingConeAngle nee getal Grootte van de overgang in de rest van de afbeelding.
specularExponent nee getal Hoe groter dit getal, hoe meer de lichtbol op een punt schijnt.
pointsAtX nee coördinaat x-coördinaat van de lichtbol.
pointsAtY nee coördinaat y-coördinaat van de lichtbol.
pointsAtZ nee coördinaat z-coördinaat van de lichtbol.
x nee coördinaat x-coördinaat van de lamp.
y nee coördinaat y-coördinaat van de lamp.
z nee coördinaat z-coördinaat van de lamp.
Bijvoorbeeld:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
<feSpecularLighting in="SourceGraphic" surfaceScale="1" specularConstant="1" specularExponent="16" lighting-color="yellow">
<feSpotLight limitingConeAngle="45" specularExponent="16" pointsAtX="80" pointsAtY="80" pointsAtZ="0" x="100" y="100" z="100" />
</feSpecularLighting>
</filter>
</defs>
<rect x="0" y="0" height="100%" width="100%" fill="black" />
<g filter="url(#MyFilter)">
</g>
</svg>

(Bekijk dit voorbeeld).

feImage

Met deze filter laad u afbeeldingen. Het enige attribuut is:
Attribuut verplicht waarde uitleg
xlink:href ja url Url van de afbeelding.
Bijvoorbeeld:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
<feImage xlink:href="../../img/bloem2.jpg" result="pict1"/>
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" filter="url(#MyFilter)" />
</svg>

(Bekijk dit voorbeeld).

feBlend

Deze filter gebruikt u om twee afbeeldingen te compineren. Deze filter heeft geen subfilters en heeft de volgende attributen:

Attribuut verplicht waarde uitleg
in ja Resultaat van andere filter. Een van de afbeeldingen die bij de combinatie wordt gebruikt.
in2 ja Resultaat van andere filter. Een van de afbeeldingen die bij de combinatie wordt gebruikt.
mode ja normal|screen|darken|lighten|multiply Manier van combineren.
Bijvoorbeeld:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
<feImage xlink:href="../../img/bloem2.jpg" result="pict1"/>
<feImage xlink:href="../../img/bloem.jpg" result="pict2"/>
<feBlend id="blend" in="pict1" in2="pict2" mode="screen"/>
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" filter="url(#MyFilter)" />
<rect x="0" y="0" width="100%" height="20" fill="green" />
<text x="0" y="18" font-family="Arial" font-size="14">
mode: </text>
<g font-family="Arial" font-size="14" fill="#00ff00">
<text x="40" y="18" onclick="evt.target.ownerDocument.getElementById('blend').setAttribute ('mode','normal');">
normal</text>
<text x="100" y="18" onclick="evt.target.ownerDocument.getElementById('blend').setAttribute ('mode','screen');">
screen</text>
<text x="160" y="18" onclick="evt.target.ownerDocument.getElementById('blend').setAttribute ('mode','darken');">
darken</text>
<text x="220" y="18" onclick="evt.target.ownerDocument.getElementById('blend').setAttribute ('mode','lighten');">
lighten</text>
<text x="280" y="18" onclick="evt.target.ownerDocument.getElementById('blend').setAttribute ('mode','multiply');">
multiply</text>
</g>
(Bekijk dit voorbeeld).

feOffset

Deze filter dient om het resultaat van een andere filter te verplaatsen ten opzichte van de filter.
Attribuut verplicht waarde uitleg
dx nee coördinaat x-coördinaat na verplaatsing.
dy nee coördinaat y-coördinaat na verplaatsing.
Bijvoorbeeld:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
<feOffset in="SourceGraphic" dx="5" dy="10" />
</filter>
</defs>
<g filter="url(#MyFilter)">
<image x="10" y="10" width="400" height="400" xlink:href="../../img/bloem2.jpg" />
</g>
</svg>

(Bekijk dit voorbeeld).

feMorphology

Met deze filter maakt u afbeeldingen blokkiger. Deze filter heeft de volgende attributen:
Attribuut verplicht waarde uitleg
operator nee erode|dilate Manier van het weergeven van de blokjes.
radius nee breedte,hoogte Grootte van de blokjes.
Bijvoorbeeld:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="360px" height="237px" xmlns="http://www.w3.org/2000/svg" onmousemove="evt.target.ownerDocument.getElementById('cp1').setAttribute ('cx',evt.clientX);evt.target.ownerDocument.getElementById('cp1'). setAttribute('cy',evt.clientY);">
<defs>
<clipPath id="clippath1">
<circle id="cp1" cx="260" cy="160" r="60" fill="green" />
</clipPath>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
<feMorphology in="SourceGraphic" radius="4,4" operator="dilate" />
</filter>
</defs>
<image x="0" y="0" width="360" height="237" filter="url(#MyFilter)" xlink:href="../../img/bloem2.jpg" />
<image style="clip-path: url(#clippath1);" x="0" y="0" width="360" height="237" xlink:href="../../img/bloem2.jpg" />
</svg>

(Bekijk dit voorbeeld).

feColorMatrix

Deze filter veranderd de kleuren van een afbeelding. Deze filter heeft de volgende attributen:
Attribuut verplicht waarde uitleg
type ja matrix|saturate|hueRotate|luminanceToAlpha Het type matrix.
values ja matrix (lijst van getallen) De matrix.


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="361px" height="266px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="MyFilter" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix id="f1" type="matrix" in="SourceGraphic" values="0 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 1 0 0 0" />
</filter>
</defs>
<image xlink:href="../../img/bloem.jpg" x="0" y="20" width="361" height="246" filter="url(#MyFilter)" />
<rect x="0" y="0" width="100%" height="20" fill="green" />
<text x="0" y="18" font-family="Arial" font-size="14">
type: </text>
<g font-family="Arial" font-size="14" fill="#00ff00">
<text x="40" y="18" onclick="evt.target.ownerDocument.getElementById ('f1').setAttribute('type','matrix');">matrix</text>
<text x="90" y="18" onclick="evt.target.ownerDocument.getElementById ('f1').setAttribute('type','saturate');">saturate</text>
<text x="150" y="18" onclick="evt.target.ownerDocument.getElementById ('f1').setAttribute('type','hueRotate');">hueRotate</text>
<text x="230" y="18" onclick="evt.target.ownerDocument.getElementById ('f1').setAttribute('type','luminanceToAlpha');">luminanceToAlpha</text>
</g> </svg>

Om het type matrix te veranderen klikt u op een van de types in het voorbeeld. (Bekijk dit voorbeeld).

Ga naar het volgende hoofdstuk: Comprimeren.