SVG - 线性梯度，与形状坐标无关

Question

我想绘制一个带有线性渐变的svg形状，就像为背景绘制的渐变一样。因此，在下面的示例图像中，它应该看起来像我只绘制蓝色椭圆笔划。我不能只绘制蓝色笔划的原因是椭圆在我的具体应用程序中移动到其他对象之上，并且在蓝色笔划内不应该有任何对象但它应该看起来像背景...使用常规定义渐变椭圆是根据椭圆的形状计算的，并且与背景的渐变不同...谢谢

<svg height="400" width="800" >
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
    <ellipse cx="200" cy="100" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
    <ellipse cx="400" cy="300" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
</svg>

Answer 1

一种可能性是为渐变使用userSpace单位，如下所示：

<svg height="400px" width="800px" viewBox="0 0 800 400" >
    <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="800" y2="400" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="800" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
    <ellipse cx="200" cy="100" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
    <ellipse cx="400" cy="300" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
</svg>