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的句子：“表示如果渐变在目标矩形的边界内开始或结束会发生什么”仅强调如果渐变矢量的端点位于目标矩形之外则没有可见效果。 无论渐变向量的端点位于何处，渐变及其属性的行为都完全相同：内部，外部或完全位于边界框上。

更详细：有两个与此问题相关的渐变属性：

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

<小时/> 要具体回答您的问题：

1. 当spreadMethod为pad时：是的，它们是等效的;否则：没有
2. 是的，如上所述。

3. 是的，将spreadMethod设置为pad以外的其他内容会产生两种影响：

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

   湾渐变将根据spreadMethod属性

的值重复

以下是pad，repeat和reflect之间差异的很好说明。线段表示渐变矢量：



来自：SVG Essentials/Patterns and Gradients