Remove semi-transparent edges get when applying the gaussian blur with 'feComponentTransfer'
jasomdotnet opened this issue · comments
Add 'feComponentTransfer' into svg filter in order to remove semi-transparent edges:
<filter id="blur" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="20 20" edgeMode="duplicate" />
<feComponentTransfer>
<feFuncA type="discrete" tableValues="1 1" />
</feComponentTransfer>
</filter>
Now you fix it by this:
/* Add this CSS to remove transparent border around the image */
left: -10%;
width: 120%;
See this article.
Thanks @jasomdotnet ! I will check out the article as time permits, but if possible, could you make a PR for these issues? I would really appreciate if you can get something together
Code before:
- Add
color-interpolation-filters="sRGB"
for removal ofcolor cascade
#7 - Double the blur value for better blur #6
- Add
feComponentTransfer
for removal of semi-transparent borders #5
Code after:
Generally, I recommend you to make background-blur
able to generate same svg
code as in article mentioned above, because @emilbjorklund, the author, seems to be more sophisticated user then me or you :-) when it comes to svg
images.
@emilbjorklund uses also edgeMode="duplicate"
or filterUnits="userSpaceOnUse"
which I don't know what it does but it can backfire for some users with older browsers (IE8, IE9, IE7...) if omitted.
This is the complete svg
code from an article:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1500" height="823" viewBox="0 0 1500 823"> <filter id="blur" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feGaussianBlur stdDeviation="20 20" edgeMode="duplicate" /> <feComponentTransfer> <feFuncA type="discrete" tableValues="1 1" /> </feComponentTransfer> </filter> <image filter="url(#blur)" xlink:href="https://www.example.com/image.jpg" x="0" y="0" height="100%" width="100%"/> </svg>
how can i implement background, motion and zoom blur in svg without css