グラデーションが揃わない

以下画像のように、グラデーションが揃いません。

上の部分が、
background: linear-gradient(to right,#fff,#000);
です。

下の部分が、
<svg>
<defs>
<linearGradient id="g">
<stop offset="0" stop-color="#000"/>
<stop offset="1" stop-color="#fff"/>
</linearGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="m0,65 q20,-70,40,0 t40,0 t40,0 V100 L0,100 z" strokewidth="0" fill="#ff948a"></path>
</svg>
です。

どのように修正すればよろしいでしょうか？
ご回答いただけますと幸いでございます。

行動規範の内容に同意します

回答1件

ベストアンサー

グラデーションが揃わないのは、「pathで定義された図形を全部表示するには幅が120必要なのに、viewBoxの幅が100しかないから」です。

HTML
1        <svg>
2            <defs>
3                <linearGradient id="g">
4                    <stop offset="0%" stop-color="#fff" />
5                    <stop offset="100%" stop-color="#000" />
6                </linearGradient>
7            </defs>
8        </svg>
9        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 100" preserveAspectRatio="none">
10            <path d="m0,65 q20,-70,40,0 t40,0 t40,0 V100 L0,100 z" stroke-width="0" fill="url(#g)"></path>
11        </svg>
12        <div style="background: linear-gradient(to right,#fff,#000);">
13            <p>dummy</p>
14        </div>
15