4向渐变填充。可能？

Question

我需要绘制4个点并用线性渐变填充该区域，每个点都有不同的颜色。是否可以在HTML5，SVG或任何其他＆＃34;浏览器＆＃34; -way中执行此操作？

感谢。

Answer 1

我在this小提琴

中试验了以下代码

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

获得此结果

HTH

编辑我尝试改进并扩展到4分：请参阅updated小提琴。您的问题对我学习SVG结构的基础非常有用。

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

值得注意的是，与stop offset="0"一起玩我们会得到不同的结果...... 这里基本：