如何“裁剪”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。

包装/外层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>

​

但是，您仍然需要某种类型的填充/内部偏移，以防止不需要的裁剪。