【发布时间】：2021-12-30 20:09:34
【问题描述】：
考虑三角形 (p1,p2,p3)。它的每个顶点都有一个给定的颜色，在下面的 svg 图像中呈现。我现在正试图用“插值”顶点颜色的线性渐变填充三角形。颜色的格式为 hsl(0, 0%, X)，X 介于 0% 和 100% 之间。
所以我计算了路径 g，使得 p2 到 g 的正交投影除以 g 的比率与颜色比率 (X2-X1) : (X3-X1) 成正比。我不想在这里详细介绍，背后的数学似乎很好，并且已经过数值测试。
在下图中，三角形和路径 g 都填充了相同的渐变，
<linearGradient id="gradient" x1="0.636269760364935" y1="1.3185582538950014" x2="1.5193472636794865" y2="0.5451509402988475">
<stop offset="0%" stop-color="hsl(0, 0%, 5.062685677174472%)"></stop>
<stop offset="100%" stop-color="hsl(0, 0%, 63.8895619052263%)"></stop>
</linearGradient>
g 的渐变看起来不错，但不是三角形的渐变，因为顶点颜色没有正确插值，而且我希望 g 匹配三角形的填充，它们都相交。与 g 正交的同一条线上的每个点不应该都具有相同的颜色，还是线性渐变不是这样工作的？
【问题讨论】：
-
这个问题没有多大意义。您需要一个 2D 渐变来在二维中的三种颜色之间进行插值，但您不能使用 1D 渐变创建 2D 渐变填充。
-
@r3mainer 我不明白你的意思，它工作得很好？！据我了解，g 是通过垂直线定义二维渐变。
标签： css svg linear-gradients