SVG - 具有光滑边缘切口的径向渐变

Question

我试图像这样创建一个SVG背景图像（两种颜色，径向渐变，带有光滑边缘的S形切口）：

创建径向渐变非常容易（例如使用this tool）：

<!-- SVG syntax --> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<radialGradient id="g920" gradientUnits="userSpaceOnUse" cx="5.408560311284047%" cy="0%" r="93.04166277718278%">
<stop stop-color="#ed1c24" offset="0.1"/><stop stop-color="#003663" offset="1"/>
</radialGradient>
<rect x="-50" y="-50" width="101" height="101" fill="url(#g920)" />
</svg>

但是也可以添加剪裁吗？

Answer 1

您可以在白色元素上使用模糊，使其看起来像剪纸。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <defs>
    <radialGradient id="g" gradientUnits="userSpaceOnUse" cx="5.4%" cy="0%" r="93%">
      <stop stop-color="#ed1c24" offset="0.1"/>
      <stop stop-color="#003663" offset="1"/>
    </radialGradient>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation=".05" />
    </filter>	
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
  <path id="svg_1" fill="white" d="m-0.1,0.5 l0,0.55l1.15,0l0,-0.53495c0,0 -0.1,-0.1 -0.5,0c-0.3,0.1 -0.5,0 -0.5,0l-0.1,0z" filter="url(#f1)"/>
</svg>

您还可以尝试meshgradient，它在svg 2.0规范中。目前没有浏览器支持我知道的。

Answer 2

Lennis＆＃39;答案很接近。但是，通过在一个元素中组合填充和滤镜，您可以获得更好的效果，而不是尝试使用模糊的白色形状来隐藏部分渐变。

请注意，模糊会影响形状的任何边缘，包括顶部，左侧和右侧。因此，您需要确保这些边缘远离SVG视口边缘（外部）。

＆＃13;

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <defs>
    <radialGradient id="g" gradientUnits="userSpaceOnUse" cx="5.4%" cy="0%" r="93%">
      <stop stop-color="#ed1c24" offset="0.1"/>
      <stop stop-color="#003663" offset="0.8"/>
    </radialGradient>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation=".05" />
    </filter>	
  </defs>
  <path id="svg_1" d="M -0.5,-0.5
                      L 1.5,-0.5
                      L 1.5,0.5
                      L 1,0.5
                      C 1,0 0.6,0.1 0.5,0.25
                      C 0.4,0.4 0.1,0.4 0,0.25
                      L -0.5,0.25
                      Z"
        fill="url(#g)" filter="url(#f1)"/>
</svg>

＆＃13;

＆＃13;

＆＃13;