如何将使用userSpaceOnUse的渐变重写为objectBoundingBox？

Question

我有一个渐变，它使用 userSpaceOnUse.

<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="800" y2="400" gradientUnits="userSpaceOnUse">
            <stop offset="0%" style="stop-color:green;stop-opacity:1" />
            <stop offset="50%" style="stop-color:black;stop-opacity:1" />
            <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>

我想重写成使用 objectBoundingBox 但却被渲染成一样的。如何才能做到这一点？

我想重写后的SVG会接近。

<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
            <stop offset="0%" style="stop-color:green;stop-opacity:1" />
            <stop offset="50%" style="stop-color:black;stop-opacity:1" />
            <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>

这个答案(https:/stackoverflow.coma506247041283776。)表示我需要使用变换，但我还没有成功找到解决方案。

Answer 1

<!-- https://stackoverflow.com/questions/22214999/svg-linear-gradient-independent-of-the-shape-coordinates -->

<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0.5" gradientUnits="objectBoundingBox" gradientTransform="scale(1, 2)">
            <stop offset="0%" style="stop-color:green;stop-opacity:1" />
            <stop offset="50%" style="stop-color:black;stop-opacity:1" />
            <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>