[Animation feGaussianBlur of clipped object]

I have found the simple solution. Just use mask with opacity instead clipping path.

 

	<mask id="welcomeMask">
		<use xlink:href="#Mask" style="stroke:none; fill: #ffffff"/>
	</mask>

	<g style="mask:url(#welcomeMask);fill: #0000ff;filter:url(#welcomeGaussianBlur);">
		<image id="svg-image_welcome" style="overflow:hidden;" width="1920" height="1282" xlink:href="/images/1fbg.jpg"   />
	</g>
	

[Animation feGaussianBlur of clipped object]

Hi, 

 

I try to make blur animation for clipped image in SVG, but at the start of the animation the image loses clip-path mask. How to change the filter value without loosing the clipping path?

 

<filter  id="welcomeGaussianBlur" color-interpolation-filters="sRGB">
	<feGaussianBlur stdDeviation="0"></feGaussianBlur>
</filter>	

<defs>
	<path id="welcomePath" d="....."/>
</defs>
	
<clipPath id="welcomeClipPath">
	<use xlink:href="#welcomeClipPath"  style="overflow:visible;"/>
</clipPath>

<g style="clip-path:url(#clipPath);filter:url(#welcomeGaussianBlur);">
	<image id="svg-image_welcome" style="overflow:hidden;" width="1920" height="1282" xlink:href="/images/1fbg.jpg"   />
</g>

.........

timeline[1].to('#welcomeGaussianBlur feGaussianBlur', 0.1, {attr:{stdDeviation:10}}, "blur")

 

[DrawSVGPlugin + SVG in canvas]

Sahil, thank you!

[DrawSVGPlugin + SVG in canvas]

Hi,
I want to create the frost glass effect after SVG stroke animation. I think the best way to do this in html5 canvas.
Is it possible to use DrawSVGPlugin for loaded to canvas svg?