SVG线性渐变定义

Question

我对SVG线性渐变规范有些困惑。假设，我想填充一个倾斜45度的线性渐变的100x100矩形。直接的方法是指定渐变点，如x1 = 0，y1 = 0，x2 = 100，y2 = 100。但是，我不清楚当我提供像x1 = 86，y1 = 0，x2 = 100和y2 = 14这样的点时会发生什么。请注意，梯度矢量仍然与前一个平行，但梯度矢量长度不覆盖整个边界框。所以，我有以下怀疑：

1. 这两个梯度定义是否相等？
2. 在第二种情况下，svg标准是否指定了像100,100这样的点会发生什么情况，它会使用梯度矢量的外插颜色吗？
3. 我知道svg渐变有一个属性spreadMethod，但根据文档，它只在渐变开始或结束于目标矩形边界内时才起作用。由于第二个定义不是相同的情况（起始点和结束点位于边界框边缘），spreadMethod仍然在这里起作用吗？

Answer 1

从spec了一句：“表示如果坡度开始发生的事情或目标矩形的界限内结束”只是强调了一个事实存在，如果梯度向量的终点所在的目标矩形之外没有明显的效果。 无论梯度矢量的端点位于：内部，外部还是精确位于边界框上，渐变及其属性的行为都完全相同。

更详细地：有两个梯度属性是相关的这个问题：

• 的gradient vector确定该梯度的“大小”仅当spreadMethod是reflect或repeat。否则，当spreadMethod为pad（默认值）时，渐变“大小”由边界框确定。当然，渐变矢量总是决定渐变的方向。
• spreadMethod属性决定了梯度是否重复以及它如何重复（从第一次停止或最后一次停止再次开始？）。如果梯度矢量“填充”到边界框的大小，则不需要重复。

---

具体回答你的问题：

1. 当spreadMethod是pad：是的，他们是等价的;否则：否
2. 是的，如上所述。

3. 是，设置spreadMethod比pad其他的东西会产生两种效果：

   一个。 b。渐变的大小将从边界框缩小到矢量的大小

   b。梯度将重复基于所述spreadMethod属性的值

这里是pad，repeat，和reflect之间的差的一个很好的例子。该线段表示渐变矢量：

来自：SVG Essentials/Patterns and Gradients