Spacefuel

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>

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")

Sahil, thank you!

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?