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°），在l上找到点P = (x2, y2)，使得DP与l成直角。

如果绘制矩形的对角线OD，它会完成一个直角三角形P。那个对角线的角度是atan(h/w)，如果你从a（即|atan(h/w) - a|）取它的绝对差，你会得到那个直角三角形的角度O。然后你可以取那个角度的余弦，得到O 和P 之间沿l 的距离与OD（斜边）长度的比例。您可以将斜边相乘，然后将其乘以cos(a) 和sin(a)，分别得到x2 和y2。

总结一下：

|OD| = sqrt(w*w + h*h)
|OP| = cos(|atan(h/w) - a|) * |OD|
x2 = |OP| * cos(a)
y2 = |OP| * sin(a)