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

【问题标题】：How can I rewrite a gradient with userSpaceOnUse to objectBoundingBox?如何使用 userSpaceOnUse 将渐变重写为 objectBoundingBox？
【发布时间】：2020-05-25 13:58:20
【问题描述】：

我有这个使用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.com/a/50624704/1283776) 表明我需要使用转换，但我没有成功找到解决方案。

【问题讨论】：

请尝试 y2="0.5"
@enxaneta：这不会使图像相同。如果您知道解决方案，请发布！
@enxaneta：感谢您的帮助，我想我在您的帮助下找到了解决方案。我正在发布它。非常欢迎您自己给出解释解决方案的答案。我不明白。

标签： svg linear-gradients

【解决方案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>

【讨论】：