linearGradient如何设置角度实现垂直方向渐变？

Question

如何使用linearGradient设置角度来实现真正的垂直方向渐变，而不是默认的斜向渐变效果？

Answer 1

1. 基础理解：linearGradient 的默认行为

在 CSS 或 SVG 中，linearGradient 是一种用于创建线性渐变的工具。默认情况下，渐变的方向是从左下角到右上角（即对角线方向）。这种斜向渐变是由于坐标系中的 x 和 y 分量共同作用的结果。

为了实现真正的垂直方向渐变，我们需要明确控制渐变的角度或方向。这可以通过调整渐变的起点和终点坐标来完成。

• 默认的渐变角度为 45°。
• 通过指定不同的起始点和结束点，可以改变渐变的方向。

2. 技术分析：如何设置垂直渐变

在 SVG 中，<linearGradient> 元素允许我们定义渐变的方向。关键属性包括：

• x1, y1: 渐变的起点。
• x2, y2: 渐变的终点。

要实现垂直方向的渐变，可以将 x1 和 x2 设置为相同的值，同时让 y1 和 y2 有所不同。例如：

<linearGradient id="verticalGradient" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="blue"/>
    <stop offset="100%" stop-color="red"/>
</linearGradient>

上述代码中，渐变从顶部的蓝色平滑过渡到底部的红色。

3. 解决方案：实际应用与扩展

除了 SVG 中的 <linearGradient>，CSS 的 linear-gradient() 函数也支持类似的功能。以下是一个 CSS 示例：

background: linear-gradient(to bottom, blue, red);

CSS 提供了更直观的方向关键字（如 to bottom），简化了垂直渐变的实现。

方法	优点	适用场景
SVG 的 <linearGradient>	灵活性高，可精确控制渐变坐标。	需要兼容旧版浏览器或复杂图形时。
CSS 的 linear-gradient()	语法简洁，易于维护。	现代网页设计中快速实现渐变效果。

4. 深入探讨：渐变角度的数学原理

渐变的方向由起始点和结束点之间的向量决定。假设起始点为 (x1, y1)，结束点为 (x2, y2)，则向量的方向角 θ 可以通过以下公式计算：

θ = atan2(y2 - y1, x2 - x1)

其中，atan2 是反正切函数，返回的角度范围为 -π 到 π。对于垂直方向的渐变，θ 应为 ±π/2。

graph TD
            A[起始点 (x1,y1)] --> B[结束点 (x2,y2)]
            B --> C{计算角度 θ}
            C --> D[判断是否为垂直方向]