The 4-way gradient fill. Possible?

Question

I need to draw 4 points and fill the area by linear gradient(s), having each of points a different color. Is it possible to do this in HTML5, SVG or any other "browser"-way?

Thanks.

Answer 1

I experimented the following code in this fiddle

<svg height="500" width="500">
    <linearGradient id="R">
        <stop offset="0" stop-color="red" stop-opacity="1"/>
        <stop offset="1" stop-color="white" stop-opacity="0"/>
    </linearGradient>

    <linearGradient id="G" gradientTransform="rotate(180 0.5 0.5)">
        <stop offset="0" stop-color="green" stop-opacity="1"/>
        <stop offset="1" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="B" gradientTransform="rotate(270 0.5 0.5)">
        <stop offset="0" stop-color="blue" stop-opacity="1"/>
        <stop offset="1" stop-color="white" stop-opacity="0"/>
    </linearGradient>

    <path d="M 100,100 L 300,100 L 200,300 Z" fill="url(#R)"/>
    <path d="M 300,100 L 100,100 L 200,300 Z" fill="url(#G)"/>
    <path d="M 200,300 L 300,100 L 100,100 Z" fill="url(#B)"/>
</svg>

getting this result

HTH

edit I've tried to improve and extend to 4 points: see updated fiddle. Your question was useful to me to learn basics of SVG structuring.

<svg height="500" width="500">

    <linearGradient id="R" gradientTransform="rotate(45 .5 .5)">
        <stop offset="0" stop-color="red" stop-opacity="1"/>
        <stop offset=".5" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="G" gradientTransform="rotate(135 .5 .5)">
        <stop offset="0" stop-color="green" stop-opacity="1"/>
        <stop offset=".5" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="B" gradientTransform="rotate(225 .5 .5)">
        <stop offset="0" stop-color="blue" stop-opacity="1"/>
        <stop offset=".5" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="Y" gradientTransform="rotate(315 .5 .5)">
        <stop offset="0" stop-color="yellow" stop-opacity="1"/>
        <stop offset=".5" stop-color="white" stop-opacity="0"/>
    </linearGradient>
    <defs>
        <path id="P" d="M 100,100 L 300,100 L 300,300 L 100,300 Z"/>
    </defs>
    <use xlink:href="#P" fill="url(#R)"/>
    <use xlink:href="#P" fill="url(#G)"/>
    <use xlink:href="#P" fill="url(#B)"/>
    <use xlink:href="#P" fill="url(#Y)"/>
</svg>

It's worth to note that playing with stop offset="0" we get different results... Here the basic: