Algorithm 四向渐变填充。可能的

我需要画4个点，用线性渐变填充这个区域，每个点都有不同的颜色。有可能用HTML5、SVG或任何其他“浏览器”方式来实现这一点吗

---

谢谢。

我在fiddle中试验了以下代码

得到这个结果

嗯

编辑我已尝试改进并扩展到4点：参见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”

会得到不同的结果。。。 这里是基本的：

---

我不知道浏览器支持a.t.m.有多远，但我发现使用InkScape这样的程序在SVG中获得概念验证，然后检查浏览器中的支持，这会有很大帮助。rotate（）的第2和第3个参数旋转轴-0.5 0.5是否围绕中心点旋转。@lucideer-但系统会计算任何形状的中心点？计算中心点并不总是一件容易的任务。@user1215106不，系统不会自动计算，因此，如果要对某种类型的典型SVG形状应用rotate（）变换，则必须知道要旋转的元素的高度和宽度。这里是一个梯度变换被应用到梯度向量上，它的长度总是=1，所以它很简单。@lucideer-但是这个形状的0'和180'旋转是错误的，对吗？我预计它们会在30'和150'左右。@user1215106对于三角形，0和180（和270）的工作-chac现在已经用正方形更新了，所以这可能对您更有意义。

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