css - css3 仕様とまったく同じように svg linearGradient を作成する

Question

SVG で特定の度合いの CSS 線形グラデーションを再作成したいと考えています。

例えば：

linear-gradient(45deg, yellow,green)

svgでは幅と高さが分かれば再現できたのですが、流動的なグラデーションを作りたいです

私の最善の解決策は次のとおりです。

<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1 1'>
    <defs>
        <linearGradient id='g' x1="1"y1='0' y2='1' gradientTransform='rotate(45, .5, .5)'>
            <stop offset='0%' stop-color='green' />
            <stop offset='100%' stop-color='yellow' />
        </linearGradient>
    </defs>
    <rect x='0' y='0' width='100%' height='100%' fill='url(#g)'/>
</svg>

これにより、グラデーションのある正方形が作成され、正方形の側面が切り取られて、ビューポート内で可能な最大の正方形が作成されます。

しかし、css3仕様では、カラーストップは最も近いコーナーから始まりますが、私のソリューションでは、正方形が始まるところから始まります。

より良い解決策はありますか？

私はそれを明確に説明したことを願っています;）