如何为SVG的Path元素应用backdrop-filter实现局部模糊？

核心问题是backdrop-filter目前不支持直接应用在SVG的<path>元素上，给整个SVG添加该属性会模糊所有区域，以下是两种可行的实现方案：

方式一：CSS Clip-Path + 独立模糊层 #

无需修改原有SVG结构，新增叠加在视频上的模糊层，用CSS clip-path匹配SVG路径形状，实现局部模糊：

<div style="width: 100%; height: auto; overflow: hidden; transform: scaleX(-1); position: relative;">
  <!-- 原SVG（若需保留路径视觉样式可保留，否则可移除） -->
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMin slice"
      viewBox="0 0 800 600"
      style="width: 100%; height: 100%;"
    >
      <path
        d="M0,0v600h800V0H0z M401,549.5c-104.8,0-189.8-111.7-189.8-249.5S296.2,50.5,401,50.5S590.8,162.2,590.8,300S505.8,549.5,401,549.5z"
        fill="transparent"
      ></path>
    </svg>
  </div>

  <!-- 视频元素 -->
  <video
    autoplay="autoplay"
    playsinline="playsinline"
    style="width: 760px; transform-origin: 0px 0px 0px;"
  ></video>

  <!-- 局部模糊层：匹配SVG路径形状 -->
  <div style="
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    clip-path: path('M0,0v600h800V0H0z M401,549.5c-104.8,0-189.8-111.7-189.8-249.5S296.2,50.5,401,50.5S590.8,162.2,590.8,300S505.8,549.5,401,549.5z');
  "></div>
</div>

关键说明 #

• 外层容器添加position: relative，让模糊层可以绝对定位叠加在视频上方
• 模糊层通过clip-path: path()直接复用SVG路径的d值，仅显示路径对应的区域
• 若不需要原SVG的视觉效果，可直接移除SVG部分

方式二：SVG内部使用ClipPath + 模糊矩形 #

将模糊效果整合到SVG内部，用<clipPath>定义路径规则，再用<rect>应用模糊并被裁剪：

<div style="width: 100%; height: auto; overflow: hidden; transform: scaleX(-1); position: relative;">
  <!-- 视频元素 -->
  <video
    autoplay="autoplay"
    playsinline="playsinline"
    style="width: 760px; transform-origin: 0px 0px 0px;"
  ></video>

  <!-- 带局部模糊的SVG -->
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMin slice"
      viewBox="0 0 800 600"
      style="width: 100%; height: 100%;"
    >
      <defs>
        <!-- 定义路径裁剪规则 -->
        <clipPath id="blurClip">
          <path d="M0,0v600h800V0H0z M401,549.5c-104.8,0-189.8-111.7-189.8-249.5S296.2,50.5,401,50.5S590.8,162.2,590.8,300S505.8,549.5,401,549.5z"></path>
        </clipPath>
      </defs>
      
      <!-- 应用模糊的矩形，被裁剪为路径形状 -->
      <rect width="100%" height="100%" style="backdrop-filter: blur(10px); clip-path: url(#blurClip);"></rect>
    </svg>
  </div>
</div>

关键说明 #

• SVG绝对定位覆盖整个容器，置于视频上方
• 通过<clipPath>复用原路径，用铺满SVG的<rect>承载模糊效果，实现局部模糊

内容的提问来源于stack exchange，提问作者borlyt-salnus