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在这里是否仍然起作用？

- Aarkan

Answer 1

这句话来自规范：“指示渐变在目标矩形内开始或结束时会发生什么”，仅仅强调了如果渐变向量的端点位于目标矩形外部，则没有可见效果。

无论渐变向量的端点位于何处（内部、外部或恰好在边界框上），渐变及其属性的行为完全相同。

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

• 只有当spreadMethod为reflect或repeat时，渐变向量才确定渐变的“大小”。否则，当spreadMethod为pad（默认值）时，渐变的“大小”由边界框确定。当然，渐变向量总是决定渐变的方向。
• spreadMethod属性确定渐变是否重复以及如何重复（重新从第一个停止位置开始还是从最后一个停止位置开始？）。如果将渐变向量“填充”到边界框的大小，则无需重复。

---

具体回答您的问题：

1. 当spreadMethod为pad时：是的，它们是等效的；否则：不是。
2. 是的，就像上面解释的那样。

3. 是的，将spreadMethod设置为除pad之外的其他值将产生两个影响：

   a. 渐变的大小将从边界框缩小到向量的大小

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

这里有一个很好的插图展示了pad、repeat和reflect之间的区别。线段代表渐变向量：

来自: SVG基础/图案和渐变

- Leftium

---

目前请注意，spreadMethod 属性仍不受 Safari 或最新版本的 WebKit 支持。 - David Bonnet