gradientUnits

gradientUnits 屬性定義了用於漸變元素上指定屬性的座標系。

您可以將此屬性與以下 SVG 元素一起使用

線性漸變

對於 <linearGradient>gradientUnits 定義了用於屬性 x1y1x2y2 的座標系。

userSpaceOnUse | objectBoundingBox
預設值 objectBoundingBox
可動畫
userSpaceOnUse

此值表示這些屬性表示在以下座標系中的值:在引用漸變元素時(即,透過 fillstroke 屬性引用漸變元素的元素的使用者座標系),獲取當前使用者座標系,然後應用屬性 gradientTransform 指定的變換。百分比表示相對於當前 SVG 視口的數值。

objectBoundingBox

此值表示屬性的使用者座標系是使用應用漸變的元素的邊界框建立的,然後應用屬性 gradientTransform 指定的變換。

百分比表示相對於物件的邊界框的數值。

使用此值且 gradientTransform 為單位矩陣時,線性漸變的法線垂直於物件邊界框空間中的漸變向量(即,(0,0) 在物件邊界框的左上角,(1,1) 在物件邊界框的右下角的抽象座標系)。當物件的邊界框不是正方形時,最初垂直於物件邊界框空間中漸變向量的漸變法線在使用者空間中相對於漸變向量的渲染可能不垂直。如果漸變向量平行於邊界框的其中一個軸,則漸變法線將保持垂直。這種變換是由於從邊界框空間到使用者空間的非均勻縮放變換的應用造成的。

徑向漸變

對於 <radialGradient>gradientUnits 定義了用於屬性 cxcyrfxfyfr 的座標系。

userSpaceOnUse | objectBoundingBox
預設值 objectBoundingBox
可動畫
userSpaceOnUse

cxcyrfxfyfr 表示在以下座標系中的值:在引用漸變元素時(即,透過 fillstroke 屬性引用漸變元素的元素的使用者座標系),獲取當前使用者座標系,然後應用屬性 gradientTransform 指定的變換。

objectBoundingBox

對於 <radialGradient>:屬性 cxcyrfxfyfr 的使用者座標系是使用應用漸變的元素的邊界框建立的(請參閱物件邊界框單位),然後應用屬性 gradientTransform 指定的變換。使用此值且 gradientTransform 為單位矩陣時,徑向漸變的圓環相對於物件邊界框空間是圓形的(即,(0,0) 在物件邊界框的左上角,(1,1) 在物件邊界框的右下角的抽象座標系)。當物件的邊界框不是正方形時,在物件邊界框空間中概念上是圓形的圓環將由於從邊界框空間到使用者空間的非均勻縮放變換的應用而呈現為橢圓形。

規範

規範
可縮放向量圖形 (SVG) 2
# RadialGradientElementGradientUnitsAttribute
可縮放向量圖形 (SVG) 2
# LinearGradientElementGradientUnitsAttribute