SVG：制作一个渐变来填充给定的每个角度的整个形状

Question

给定0°和90°之间的角度，生成一个填充整个矩形的SVG渐变。

SVG渐变接受两个控制点而不是角度。以下是上图中第一个方块的代码：

<linearGradient x1="0" y1="0" x2="1" y2="0.5">

问题是渐变不会覆盖整个方块。我想扩展渐变到足以完全填充形状，以便红色三角形不可见。这是一个 interactive demo （在Chrome，Firefox和Safari中测试过），可以让您有更好的想法。

---

Solution in JavaScript：

function angleToVector(angle) {
    var od = Math.sqrt(2);
    var op = Math.cos(Math.abs(Math.PI/4 - angle)) * od;
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);
    return {x: x, y: y};
}

---

angle between -180° and 180°：

function angleToPoints(angle) {
    var segment = Math.floor(angle / Math.PI * 2) + 2;
    var diagonal = (1/2 * segment + 1/4) * Math.PI;
    var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);

    return {
        x1: x < 0 ? 1 : 0,
        y1: y < 0 ? 1 : 0,
        x2: x >= 0 ? x : x + 1,
        y2: y >= 0 ? y : y + 1
    };
}

可能有一个更简单的解决方案。

Answer 1

所以我的理解是这样的：给定一个矩形（其左上角是原点O = (0, 0)，右下角是D = (w, h)）和一行l以角度O（a）指向0° <= a <= 90°，在P = (x2, y2)上找到l点，使DP行与l成直角{1}}。

如果您绘制矩形的对角线OD，它会在P处完成一个直角的直角三角形。该对角线的角度为atan(h/w)，如果您从a（即|atan(h/w) - a|）获取该角度的绝对差值，您将在点{{}处获得该直角三角形的角度1}}。然后，您可以使用该角度的余弦来O和O之间的距离P，作为l（斜边）长度的一部分。您可以将斜边相乘，然后将其乘以OD和cos(a)，分别得到sin(a)和x2。

总结：

y2