漸變單位

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

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

linearGradient

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

userSpaceOnUse | objectBoundingBox
預設值 objectBoundingBox
可動畫的
userSpaceOnUse

此值表示屬性值是在當前使用者座標系中定義的。該使用者座標系是在引用漸變元素的時,在該元素(透過 fillstroke 屬性引用漸變元素的元素)處存在的使用者座標系,然後應用 gradientTransform 屬性指定的變換。百分比值相對於當前 SVG 視口的尺寸。

objectBoundingBox

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

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

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

radialGradient

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

userSpaceOnUse | objectBoundingBox
預設值 objectBoundingBox
可動畫的
userSpaceOnUse

cxcyrfxfyfr 表示的值是在當前使用者座標系中定義的。該使用者座標系是在引用漸變元素的時,在該元素(透過 fillstroke 屬性引用漸變元素的元素)處存在的使用者座標系,然後應用 gradientTransform 屬性指定的變換。

objectBoundingBox

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

規範

規範
Scalable Vector Graphics (SVG) 2
# LinearGradientElementGradientUnitsAttribute
Scalable Vector Graphics (SVG) 2
# RadialGradientElementGradientUnitsAttribute

瀏覽器相容性

svg.elements.linearGradient.gradientUnits

svg.elements.radialGradient.gradientUnits