<filter id="F"> |
<filter id="F"> |
<filter id="F"> |
<filter id="B" x="0%" y="0%" width="100%" height="100%"> |
Blurring the final result (stdDeviation="20") | Blurring the image first (stdDeviation="20") |
<pattern id="Pix ,,, |
<pattern id="Pix" ... |
<filter id="F">
<feColorMatrix type="saturate" values="0" />
</filter>
<pattern id="BigPix" patternUnits="userSpaceOnUse" width="400" height="400" >
<g id="ggg" >
<g id="gg">
<g id="g">
<image id="I" x="0" y="0" width="200" height="200"
preserveAspectRatio="none" xlink:href="p17.jpg" />
<use xlink:href="#I" filter="url(#F)" transform=" translate(200,0)" />
</g>
<use xlink:href="#g" transform=" translate(400,200) scale(-1,1)"/>
</g>
</g>
</pattern>
<pattern id="Pix" patternUnits="userSpaceOnUse" width="100" height="100" >
<use xlink:href="#gg" transform="scale(.25)"/>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Pix)" />
<rect x="0" y="0" width="100%" height="100%" fill="url(#BigPix)" />
<rect x="0" y="0" width="100%" height="100%" fill="url(#BigPix)" filter="url(#F2)"/>so that the whitish values in that image are converted to transparent.
<filter id="F2">
<feColorMatrix type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
-.33 -.33 -.33 0 1
"/>
</filter>
To
Red Green Blue Alpha Constant
Red 1 0 0 0 0
From Green 0 1 0 0 0
Blue 0 0 1 0 0
Alpha -.33 -.33 -.33 0 1
alpha = -0.33 ( R + G + B ) + constant.We add a constant of 1 since if the constant were zero, then the top image would be everywhere transparent (alpha less than 0). If the constant were 2.0, then the top image would be everywhere opaque (alpha greater than 1). It is in between this range and for values that have high brightness that we wish to make transparency.
<filter id="F2"> |