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 |