我如何“裁剪” svg 以适应父母的形状？

Question

如何“裁剪” svg 过滤器以适应父级的形状？

现在我有一个 div 作为一个圆圈，里面有一个 svg。但是 svg 过滤器会创建一个矩形。

编辑：我尝试按照下面的建议实现一个带有border-radius:100% 的包装div，但随后它消除了模糊。

original codepen

updated codepen with wrapping div

svg{
  width:100%; 
  height: 100%;  

}
.custom-cursor {
  border-radius: 50%;
  overflow: hidden; 
  width: 20px;
  height: 20px;
    background-image: conic-gradient( cyan, magenta, yellow, cyan); 
  filter: blur(5px) url("#blur-plus-grain");
}

<div class="custom-cursor">
  <svg preserveAspectRatio="none">
    <filter id="blur-plus-grain">
      <feGaussianBlur stdDeviation="0.8" result="blur" />
      <feTurbulence type="fractalNoise" numOctaves="26" baseFrequency="40" stitchTiles="stitch" result="grain" />
      <feComposite operator="in" in="blur" in2="grain" />
    </filter>
    <circle fill="transparent" r="10" cx="50%" cy="50%" filter="url(#blur-plus-grain)" />
  </svg>

</div>

Answer 1

您将 svg 噪声模糊过滤器应用于圆形渐变填充的 div。
但是仍然有一个 css 框上下文。

您实际上需要一些填充来提供足够的“画布”区域。 否则任何类型的模糊都可能超出 div 元素的边界：

* {
  box-sizing: border-box;
}

svg {
  width: 100%;
  height: 100%;
}

.custom-cursor-clip {
  width: 50px;
  height: 50px;
  padding:2%;
  filter: url("#blur-plus-grain");
}
.custom-cursor {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-image: conic-gradient(from 20deg, #003399, #74b4da, #e0bbd9);
}

<div class="custom-cursor-clip">
  <div class="custom-cursor">
    <svg preserveAspectRatio="none">
      <filter id="blur-plus-grain">
        <feGaussianBlur stdDeviation="4" result="blur" />
        <feTurbulence type="fractalNoise" numOctaves="26" baseFrequency="40" stitchTiles="stitch" result="grain" />
        <feComposite operator="in" in="blur" in2="grain" />
      </filter>
    </svg>
  </div>
</div>

编辑：
本质上，您将圆锥渐变应用于内部 div。
wrapping/outer div 提供了一些填充以及 svg-filter。

编辑 2：

您还可以使用 <foreignObject> 元素来获得更独立的 svg img 资产：

    <svg  width="50" height="50" viewBox="0 0 100 100">
      <style>
        .conicGradient{
          width: 100%;
          height: 100%;
          border-radius: 100%;
          background-image: conic-gradient(from 20deg, #003399, #74b4da, #e0bbd9);
        }
      </style>
      <filter id="blur-plus-grain" filterUnits="userSpaceOnUse" >
        <feGaussianBlur stdDeviation="4" result="blur" />
        <feTurbulence type="fractalNoise" numOctaves="26" baseFrequency="40" stitchTiles="stitch" result="grain" />
        <feComposite operator="in" in="blur" in2="grain" />
      </filter>  
      <foreignObject filter="url(#blur-plus-grain)" 
      x="10" y="10" width="80" height="80">
        <div class="conicGradient" xmlns="http://www.w3.org/1999/xhtml" ></div>
      </foreignObject>
    </svg>

但是，您仍然需要某种填充/内部偏移来防止意外裁剪。