SVG - Linear Gradient independent of the shape coordinates

Question

I want to draw a svg shape with a linear gradient which is just as the gradient painted for the background. So in the example image below it should look like I paint only the blue ellipse stroke. The reason I cannot just paint the blue stroke is that the ellipse is moving in my concrete application above other objects and within the blue stroke there should not be any object but it should look like the background... With the regular definition the gradient for the ellipse is calculated according to the shape of the ellipse and by that differs from the gradient of the background ... thanks

<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

One possibility is to use userSpace units for your gradients like so:

<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>