algorithm - 4向渐变填充。可能的？

Question

我需要绘制 4 个点并用线性渐变填充区域，每个点的颜色不同。是否可以在 HTML5、SVG 或任何其他“浏览器”方式中执行此操作？

谢谢。

Answer 1

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

得到这个结果

HTH

编辑 我尝试改进并扩展到 4 点:参见 updated fiddle 。您的问题对我学习 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" 我们会得到不同的结果...这是基本的: