linearGradient
對於 <linearGradient>,gradientUnits 定義了用於 x1、y1、x2 和 y2 屬性的座標系。
| 值 | userSpaceOnUse | objectBoundingBox |
|---|---|
| 預設值 | objectBoundingBox |
| 可動畫的 | 是 |
userSpaceOnUse-
此值表示屬性值是在當前使用者座標系中定義的。該使用者座標系是在引用漸變元素的時,在該元素(透過
fill或stroke屬性引用漸變元素的元素)處存在的使用者座標系,然後應用gradientTransform屬性指定的變換。百分比值相對於當前 SVG 視口的尺寸。 objectBoundingBox-
此值表示屬性的使用者座標系是使用應用漸變的元素的邊界框建立的,然後應用
gradientTransform屬性指定的變換。百分比值相對於物件的邊界框。
使用此值且
gradientTransform為單位矩陣時,線性漸變的法線在物件邊界框空間中垂直於漸變向量(即,抽象座標系,其中 (0,0) 位於物件邊界框的左上角,(1,1) 位於物件邊界框的右下角)。當物件的邊界框不是正方形時,在物件邊界框空間中最初垂直於漸變向量的漸變法線,在使用者空間中相對於漸變向量可能不再垂直。如果漸變向量與邊界框的某個軸平行,則漸變法線將保持垂直。這種變換是由於從邊界框空間到使用者空間應用了非均勻縮放變換。
radialGradient
對於 <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的使用者座標系是使用應用漸變的元素的邊界框建立的(參見 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
載入中…