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