svg 的背景滤镜

Question

我想要在六边形下有模糊的空间。 更多细节：六边形有边界半径和一些不透明度。 六边形

我尝试使用剪辑路径，但它并没有准确模糊我需要的区域。 其他提供的解决方案不考虑边界

Answer 1

在这里，我创建了六角形并将其用于两个不同的蒙版中。一个遮罩用于背景，另一个遮罩用于六边形周围的边框。边框是使用蒙版中的形状上的滤镜制作的。

组成六角形本身有两个元素。第一个矩形用于边框，分组元素用于背景。

body {
  background-color: DarkMagenta;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" height="95vh">
  <defs>
    <g id="hex" transform="translate(33 33)" fill="white">
      <circle r="10"/>
      <rect id="r1" transform="skewX(-30)" width="30" height="25.9" rx="3" />
      <use href="#r1" transform="rotate(60)" />
      <use href="#r1" transform="rotate(120)" />
      <use href="#r1" transform="rotate(180)" />
      <use href="#r1" transform="rotate(240)" />
      <use href="#r1" transform="rotate(300)" />
    </g>
    <radialGradient id="rg1">
      <stop offset="0%" stop-opacity=".6" stop-color="black" />
      <stop offset="100%" stop-opacity="0" stop-color="black" />
    </radialGradient>
    <radialGradient id="rg2">
      <stop offset="0%" stop-color="black" />
      <stop offset="80%" stop-color="purple" />
    </radialGradient>
    <mask id="m1">
      <use href="#hex"/>
    </mask>
    <mask id="m2">
      <use href="#hex" filter="url(#outline)"/>
    </mask>
    <filter id="outline">
      <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius=".5"/>
      <feFlood flood-color="white" result="COLOR"/>
      <feComposite in="COLOR" in2="DILATED" operator="in"/>
    </filter>
  </defs>
  <rect width="100" height="100" fill="#9697a1" mask="url(#m2)"  />
  <g mask="url(#m1)">
    <rect width="66" height="66" fill="url(#rg2)"/>
    <circle cx="66" cy="15" r="60" fill="url(#rg1)"/>
  </g>
</svg>