gradientUnits
線性漸變
對於 <linearGradient>,gradientUnits 定義了用於屬性 x1、y1、x2 和 y2 的座標系。
| 值 | userSpaceOnUse | objectBoundingBox |
|---|---|
| 預設值 | objectBoundingBox |
| 可動畫 | 是 |
userSpaceOnUse-
此值表示這些屬性表示在以下座標系中的值:在引用漸變元素時(即,透過
fill或stroke屬性引用漸變元素的元素的使用者座標系),獲取當前使用者座標系,然後應用屬性gradientTransform指定的變換。百分比表示相對於當前 SVG 視口的數值。 objectBoundingBox-
此值表示屬性的使用者座標系是使用應用漸變的元素的邊界框建立的,然後應用屬性
gradientTransform指定的變換。百分比表示相對於物件的邊界框的數值。
使用此值且
gradientTransform為單位矩陣時,線性漸變的法線垂直於物件邊界框空間中的漸變向量(即,(0,0) 在物件邊界框的左上角,(1,1) 在物件邊界框的右下角的抽象座標系)。當物件的邊界框不是正方形時,最初垂直於物件邊界框空間中漸變向量的漸變法線在使用者空間中相對於漸變向量的渲染可能不垂直。如果漸變向量平行於邊界框的其中一個軸,則漸變法線將保持垂直。這種變換是由於從邊界框空間到使用者空間的非均勻縮放變換的應用造成的。
徑向漸變
對於 <radialGradient>,gradientUnits 定義了用於屬性 cx、cy、r、fx、fy 和 fr 的座標系。
| 值 | userSpaceOnUse | objectBoundingBox |
|---|---|
| 預設值 | objectBoundingBox |
| 可動畫 | 是 |
userSpaceOnUse-
cx、cy、r、fx、fy和fr表示在以下座標系中的值:在引用漸變元素時(即,透過fill或stroke屬性引用漸變元素的元素的使用者座標系),獲取當前使用者座標系,然後應用屬性gradientTransform指定的變換。 objectBoundingBox-
對於
<radialGradient>:屬性cx、cy、r、fx、fy和fr的使用者座標系是使用應用漸變的元素的邊界框建立的(請參閱物件邊界框單位),然後應用屬性gradientTransform指定的變換。使用此值且gradientTransform為單位矩陣時,徑向漸變的圓環相對於物件邊界框空間是圓形的(即,(0,0) 在物件邊界框的左上角,(1,1) 在物件邊界框的右下角的抽象座標系)。當物件的邊界框不是正方形時,在物件邊界框空間中概念上是圓形的圓環將由於從邊界框空間到使用者空間的非均勻縮放變換的應用而呈現為橢圓形。
規範
| 規範 |
|---|
| 可縮放向量圖形 (SVG) 2 # RadialGradientElementGradientUnitsAttribute |
| 可縮放向量圖形 (SVG) 2 # LinearGradientElementGradientUnitsAttribute |