gradientunits
该gradientUnits
属性为在<lineargradient>
元素中的属性x1
,y1
,x2
和y2
或在<radialgradient>
元素中的属性cx
,cy
,r
,fx
,和fy
定义坐标系。
如果gradientUnits
没有指定属性,那么效果就好像objectBoundingBox
指定了值一样。
用法上下文
Categories | None |
---|---|
Value | userSpaceOnUse | objectBoundingBox |
Animatable | Yes |
Normative document | SVG 1.1 (2nd Edition): linearGradient SVG 1.1 (2nd Edition): radialGradient |
userSpaceOnUse
—— x1
,y1
,x2
,y2
,cx
,cy
,r
,fx
和fy
表示在该坐标系中,当梯度元素被引用时,取得当前的用户坐标系统而产生的值(即,对于经由fill
或stroke
属性引用梯度元素的元素的用户坐标系),然后应用由gradientTransform
属性指定的变换。
objectBoundingBox for<lineargradient>
:通过使用该元件的边界框的梯度建立关于x1
,y1
,x2
,y2
的用户坐标系(参照对象边界框单元),然后应用由属性gradientTransform
指定的变换。
当gradientUnits="objectBoundingBox"
和gradientTransform
为单位矩阵时,线性梯度的法线垂直于对象边界框空间中的梯度矢量(即,其中(0,0)位于对象边界框的顶部/左侧的抽象坐标系和1,1)位于对象边界框的底部/右侧)。
当对象的边界框不是正方形时,初始垂直于对象边界框空间内的梯度矢量的梯度法线可以相对于用户空间中的梯度矢量呈现非垂直。如果梯度矢量平行于边界框的其中一个轴,则梯度法线将保持垂直。这种转换是由于应用从边界框空间到用户空间的非均匀缩放转换完成的。对于<radialgradient>
:通过使用该元件的边界框的梯度建立关于cx
,cy
,fx
,fy
的用户坐标系(参照对象边界框单元),然后应用由属性gradientTransform
指定的变换。
当gradientUnits="objectBoundingBox"
和gradientTransform
是单位矩阵时,则径向梯度的环相对于对象边界框空间是圆形的(即,其中(0,0)位于对象边界框的顶部/左侧的抽象坐标系和1,1位于对象边界框的底部/右侧)。当对象的边界框不是正方形时,由于应用从边界框空间到用户空间的非均匀缩放变换,在对象边界框空间内概念上为圆形的环将呈现为椭圆形。
实例
适用元素
以下元素可以使用该gradientUnits
属性:
<lineargradient>
<radialgradient>
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com