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

时间:2016-08-16 18:01:47

标签: svg

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

enter image description here

创建径向渐变非常容易(例如使用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>

但是也可以添加剪裁吗?

2 个答案:

答案 0 :(得分: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规范中。目前没有浏览器支持我知道的。

答案 1 :(得分:1)

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;