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