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 以外的值会产生两种效果:

   一个。梯度的大小会从bounding box缩小到vector的大小

   渐变将根据 spreadMethod 属性的值重复

这里很好地说明了 pad、repeat 和 reflect 之间的区别。线段代表梯度向量:

来自:SVG Essentials/Patterns and Gradients