非常教程

SVG参考手册

属性 | Attributes

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

  • 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>

属性 | Attributes相关

1.accent-height(焦点高度)
2.accumulate(积累)
3.additive
4.alignment-baseline(对齐基线)
5.ascent
6.attributename(属性名字)
7.Attributes(属性)
8.attributetype(属性类型)
9.azimuth(方位)
10.basefrequency
11.baseline-shift(基线漂移)
12.baseprofile
13.begin(开始)
14.bias(偏压)
15.calcmode
16.class
17.clip(剪辑)
18.clip-path(剪辑路径)
19.clip-rule(剪辑规则)
20.clippathunits
21.color(颜色)
22.color-interpolation(彩色插值)
23.color-interpolation-filters(色彩插值滤波器)
24.color-profile(彩色轮廓)
25.color-rendering(显色)
26.contentscripttype
27.contentstyletype
28.cursor(光标)
29.cx
30.cy
31.d
32.diffuseconstant
33.direction(方向)
34.display(显示)
35.divisor
36.dominant-baseline(显性基线)
37.dur
38.dx
39.dy
40.edgemode
41.elevation
42.end
43.externalresourcesrequired
44.fill
45.fill-opacity
46.fill-rule
47.filter
48.filterres
49.filterunits
50.flood-color
51.flood-opacity
52.font-family
53.font-size
54.font-size-adjust
55.font-stretch
56.font-style
57.font-variant
58.font-weight
59.fr
60.from
61.fx
62.fy
63.gradienttransform
64.height
65.href
66.image-rendering
67.in
68.in2
69.k1
70.k2
71.k3
72.k4
73.kernelmatrix
74.kernelunitlength
75.kerning
76.keysplines
77.keytimes
78.lengthadjust
79.letter-spacing
80.lighting-color
81.limitingconeangle
82.local
83.marker-end
84.marker-mid
85.marker-start
86.markerheight
87.markerunits
88.markerwidth
89.mask
90.maskcontentunits
91.maskunits
92.max
93.min
94.mode
95.numoctaves
96.opacity
97.operator
98.order
99.overflow
100.overline-position
SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。