Estoy usando reaccionar con mecanografiado. En mi proyecto, tengo una etiqueta de video y sobre ella, tengo un elemento SVG rect . Ahora quiero hacer un efecto borroso en SVG. Probé el filter:blur(8px); property pero hace que la imagen sea completamente negra y no la hace borrosa.
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); }Intenta agregar algunos estilos más a tu svg:
.rectangle{ fill: rgba(0,0,0,0); backdrop-filter: blur(8px); } Además, si necesita un desenfoque de rectángulo, puede hacerlo simplemente usando <div> . Establezca el width y la height , luego con position: absolute y los valores de top , left , right , bottom , colóquelo en la posición derecha. Finalmente, aplique el backdrop-filter: blur(8px)