WebApp HTML Header with svg-Filter

General
1

Hi,

i am developing a web-App.
I use HTML-svgCode and style to alter the User UI(some examples from my app):

HTML-Header:

<svg>
	<filter id="Blur_Opa_Sat" style="color-interpolation-filters:sRGB">
		<feGaussianBlur stdDeviation="0" result="result1" in="SourceGraphic">
			 <animate attributeName="stdDeviation" begin="0s" dur="5s" from="10" to="0" fill="freeze"/>
		</feGaussianBlur>
		<feColorMatrix type="saturate" result="result2" in="result1" values="1">
			 <animate attributeName="values" begin="5s" dur="5s" from="1" to="0.5" fill="freeze"/>
		</feColorMatrix>
		<feColorMatrix result="result3" in="result2" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0">
			 <animate attributeName="values" begin="5s" dur="5s" from="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" to="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.2 0" fill="freeze"/>
		</feColorMatrix>
	</filter>
</svg>

A filter that starts with a blurred source-image, unblurs it over time and then fades opacity and saturation out a bit later.

Utilizing this with an imageviewer via style-setting:

' Style imageviewer
Dim style_img As New WebStyle
style_img.Value("display") = "block"
style_img.Value("margin-left") = "auto"
style_img.Value("margin-right") = "auto"
style_img.Value("max-width") = "70%"
style_img.Value("max-height") = "70%"
style_img.Value("filter") = "url(#Blur_Opa_Sat)"
ImageViewer1.style = style_img

This and other svg-filters work fine with quite low workload providing some nice and smooth effects.
I can use the svg-filter on a complete website or single controls like labels etc.

Working fine so far, but…to get a better UI-handling i would like to use an svg-filter with the background image too.

Setting the background image up like this:

Login.Style.Value("background-image") = "url(https://www.XXXXX.XX/XXXX.svg)"
Login.Style.Value("background-size") = "500px 500px"
Login.Style.Value("background-repeat") = "no-repeat"
Login.Style.Value("filter") = "url(#blur_Opa_Sat)"

This will apply the filter to the whole displayed website which is displayed, even to controls that get there style assigned ‘later’ in the code.

Question: How do i apply/set my svg-filter just to the background image of the website?
Help would be really appreciated, thanks in advance.

Take care

Marco

2

According to this, it could be difficult:

Maybe you can use a Viewer control (Canvas or WebImageViewer) as the background holder and apply the effect there?

Edit: if you want to share an example someone will be able to take a look at alternatives.