css - 我需要使用 SVG 创建 2 色曲线响应背景

Question

我需要创建具有两种颜色的曲线响应式 SVG 背景。

我试过下面的代码:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100% 100%" class="hidden-xs hidden-sm">
                        <defs>
                            <clipPath id="clip-Nye">
                                <rect width="100%" height="100%"/>
                            </clipPath>
                        </defs>
                        <g id="Nye" data-name="Nye" clip-path="url(#clip-Nye)">
                            <rect width="100%" height="100%" fill="#fff"/>
                            <path id="Rectangle" d="M0,453.226,817.641,0s696,663.078,406.715,730.84q-335.194,78.515-815.961,459.149C142.369,1400.607,0,453.226,0,453.226Z" transform="matrix(-0.485, 0.875, -0.875, -0.485, 1914.704, 197.622)" fill="#01b0f0"/>
                        </g>
                    </svg>

问题是，当我使用 CTRL + - 最小化页面时，SVG 无法正确显示并且侧面显示空白。

我做错了什么？有什么想法吗？

Answer 1

您可以尝试使用radial-gradient :

body {
  margin:0;
  height:100vh;
  background:radial-gradient(100% 200% at left,white 50%,#01b0f0 50.1%);
}