SVG - 私はこの（2色ラジアル勾配、滑らかな縁部を有するS字状の切り欠き）のようなSVGの背景画像を作成しようとしている滑らかなエッジ切欠

Question

ラジアル勾配：

にです放射状のグラデーションを作成するのはとても簡単（例えば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

Lennisの回答が近いです。しかし、グラデーションの一部を隠すためにぼんやりした白い形を使用するのではなく、1つの要素でフィルとフィルターを組み合わせることで、より良い結果が得られます。

ぼかしは、上、左、右を含むシェイプのエッジに影響します。したがって、それらのエッジがSVGビューポートの端から離れていることを確認する必要があります。

<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> \t 
 
    </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>

Answer 2

白い要素にぼかしを使用すると、切り抜きのように見えるようになります。

<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> \t 
 
    </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>

また、それは、SVG 2.0仕様でだ、meshgradientを試みることができます。現時点では、私が知っているブラウザはサポートしていません。