首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

gradientunits

gradientUnits属性为在<lineargradient>元素中的属性x1y1x2y2或在<radialgradient>元素中的属性cxcyrfx,和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—— x1y1x2y2cxcyrfxfy表示在该坐标系中,当梯度元素被引用时,取得当前的用户坐标系统而产生的值(即,对于经由fillstroke属性引用梯度元素的元素的用户坐标系),然后应用由gradientTransform属性指定的变换。

objectBoundingBox for<lineargradient>:通过使用该元件的边界框的梯度建立关于x1y1x2y2的用户坐标系(参照对象边界框单元),然后应用由属性gradientTransform指定的变换。

gradientUnits="objectBoundingBox"gradientTransform为单位矩阵时,线性梯度的法线垂直于对象边界框空间中的梯度矢量(即,其中(0,0)位于对象边界框的顶部/左侧的抽象坐标系和1,1)位于对象边界框的底部/右侧)。

当对象的边界框不是正方形时,初始垂直于对象边界框空间内的梯度矢量的梯度法线可以相对于用户空间中的梯度矢量呈现非垂直。如果梯度矢量平行于边界框的其中一个轴,则梯度法线将保持垂直。这种转换是由于应用从边界框空间到用户空间的非均匀缩放转换完成的。对于<radialgradient>:通过使用该元件的边界框的梯度建立关于cxcyfxfy的用户坐标系(参照对象边界框单元),然后应用由属性gradientTransform指定的变换。

gradientUnits="objectBoundingBox"gradientTransform是单位矩阵时,则径向梯度的环相对于对象边界框空间是圆形的(即,其中(0,0)位于对象边界框的顶部/左侧的抽象坐标系和1,1位于对象边界框的底部/右侧)。当对象的边界框不是正方形时,由于应用从边界框空间到用户空间的非均匀缩放变换,在对象边界框空间内概念上为圆形的环将呈现为椭圆形。

实例

适用元素

以下元素可以使用该gradientUnits属性:

  • <lineargradient>
  • <radialgradient>

扫码关注腾讯云开发者

领取腾讯云代金券