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

Posted 2023-03-28

【中文标题】我如何“裁剪” svg 以适应父母的形状？

【英文标题】：How can i "crop" the svg to fit the shape of the parent?

【发布时间】：2021-12-17 07:34:06

【问题描述】：

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

【问题讨论】：

您好，我查看了您的代码笔并将 div 尺寸设置为 200px，看看发生了什么更好。整个事情是圆形的。然后我删除了似乎没有任何区别的 SVG。你能描述更多问题是什么吗？可能是在 20 像素的尺寸下，您会获得边缘效果 - 没有多少像素可以使物体看起来很圆。

【参考方案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    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"  >
        <div class="conicGradient" xmlns="http://www.w3.org/1999/xhtml" ></div>
      </foreignObject>
    </svg>

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

【讨论】：

非常感谢您对我的帮助。更新了代码笔。但是，使用此解决方案，边缘上的模糊消失了。 =(

在我的浏览器（Chrome/Win10）中看起来不错。

@Emma Andersson：我添加了另一个示例代码，可能更适合。