Can I blend gradients in svg?

user_844614 0
Viewed 2299

I would like to fill an SVG shape with two gradients, where one is at a 45 degree angle to the other:

<linearGradient id="wave" x1="0%" x2="100%" y1="0%" y2="0%"
spreadMethod="pad">
    <stop offset="0%"   stop-color="gray" />
    <stop offset="25%"  stop-color="black"/>
    <stop offset="65%"  stop-color="white"/>
    <stop offset="100%" stop-color="gray" />
</linearGradient>
<linearGradient id="red-yellow" x1="0%" x2="100%" y1="0%" y2="100%"
spreadMethod="pad" gradientTransform="rotate(7)">
    <stop offset="0%"   stop-color="gold" />
    <stop offset="30%"  stop-color="gold"/>
    <stop offset="50%"  stop-color="red"/>
    <stop offset="100%" stop-color="red" />
</linearGradient>

Is there a way to blend (multiply) these gradients? The end result should be a rect (or arbitrary shape) that changes from 'gold' on the top left to 'red' on the bottom right, and where the value (as in HSV) changes from medium to low to high to medium from left to right.

svg
2 Answers
Related