How to apply a gradient color throughout an SVG Path

Question

I am trying to apply a gradient color along an SVG which consists of multiple <path> tags. I want SVG paths to start with a color and end up with another color and do this through the entirety of the collection of paths. What I currently have is the following code, which outputs the following image:

<svg width="300" height="300" viewBox="0 0 300 300">
    <defs>
        <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%" >
            <stop offset="0%" stop-color="#f5f242" />
            <stop offset="100%" stop-color="#5430e6" />
        </linearGradient>
    </defs>

    <g fill="url(#gradient1)">
        <path d="M 10 10 h 90 v 6 h -90" />
        <path d="M 100 10 v 90 h 6 v -90" />
        <path d="M 10 94 h 90 v 6 h -90" />
    </g>
</svg>

I want the gradient to start with yellow at top left and as you move along the lines, I want it to end at the purple at the bottom left. Is this possible with SVG? How can I achieve this?