How to create blurry effect with svg over video-CodePudding

I am using react with typescript. In my project, I have a video tag and over it, I have one SVG rect element. Now I want to do a blurry effect on SVG. I tried CSS filter:blur(8px); property but it's making the image completely black and not making it blur.

import './App.css';



const App = () => {


  return <div className='container'>
     <video autoPlay>
         <source src={'https://www.w3schools.com/tags/movie.mp4'} />
     </video>
<svg id="svg">
     <rect className='rectangle' x={80} y={120} width={300} height={300} />
</svg>
  </div>;
};

export default App;

css:

.rectangle{
   filter:blur(8px);
}

This is I am getting

sandbox link

CodePudding user response：

Try to add some more styles to your svg:

.rectangle{
    fill: rgba(0,0,0,0);
    backdrop-filter: blur(8px);
}

Whats more, if you need a rectangle blur, you can do this simply using <div>. Set the width and height, then with position: absolute and values of top, left, right, bottom place it in right posiotion. Finally apply CSS property backdrop-filter: blur(8px)