如何在视频上使用 svg 创建模糊效果答案

【问题标题】：How to create blurry effect with svg over video如何在视频上使用 svg 创建模糊效果
【发布时间】：2022-01-27 21:05:25
【问题描述】：

我正在使用对打字稿做出反应。在我的项目中，我有一个视频标签，在它之上，我有一个 SVG rect 元素。现在我想对 SVG 做一个模糊的效果。我尝试了 CSS filter:blur(8px); 属性，但它使图像完全变黑而不是模糊。

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

【问题讨论】：

这个问题可能与 Reactjs 无关：你能改为分享一个包含生成标记的 minimal reproducible example 吗？
我添加了沙盒链接
您的沙盒示例不会将矩形覆盖在图像上...

标签： javascript html css reactjs svg

【解决方案1】：

尝试为您的 svg 添加更多样式：

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

更重要的是，如果您需要矩形模糊，只需使用<div> 即可。设置width 和height，然后将position: absolute 和top、left、right、bottom 的值放在正确的位置。最后应用 CSS 属性backdrop-filter: blur(8px)

【讨论】：

不工作。效果还是一样的
当然，试试属性'fill'，我编辑了我的答案