The gradientUnits
attribute defines the coordinate system used for attributes specified on the gradient elements.
Two elements are using this attribute: <linearGradient>
and <radialGradient>
For <linearGradient>
, gradientUnits
defines the coordinate system used for the attributes x1
, y1
, x2
, and y2
.
Value 
userSpaceOnUse  objectBoundingBox


Default value  objectBoundingBox 
Animatable  Yes 
userSpaceOnUse
fill
or stroke
property) and then applying the transform specified by attribute gradientTransform
.objectBoundingBox
gradientTransform
.gradientTransform
being the identity matrix, the normal of the linear gradient is perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the gradient normal which is initially perpendicular to the gradient vector within object bounding box space may render nonperpendicular relative to the gradient vector in user space. If the gradient vector is parallel to one of the axes of the bounding box, the gradient normal will remain perpendicular. This transformation is due to application of the nonuniform scaling transformation from bounding box space to user space.For <radialGradient>
, gradientUnits
defines the coordinate system used for the attributes cx
, cy
, r
, fx
, fy
, and fr
.
Value 
userSpaceOnUse  objectBoundingBox


Default value  objectBoundingBox 
Animatable  Yes 
userSpaceOnUse
cx
, cy
, r
, fx
, fy
, and fr
represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill
or stroke
property) and then applying the transform specified by attribute gradientTransform
.objectBoundingBox
<radialGradient>
: the user coordinate system for attributes cx
, cy
, r
, fx
, fy
, and fr
is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) and then applying the transform specified by attribute gradientTransform
.gradientTransform
being the identity matrix, the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to application of the nonuniform scaling transformation from bounding box space to user space.Specification  Status  Comment 

Scalable Vector Graphics (SVG) 2 The definition of 'gradientUnits for <radialGradient>' in that specification.  Candidate Recommendation  No change 
Scalable Vector Graphics (SVG) 2 The definition of 'gradientUnits for <linearGradient>' in that specification.  Candidate Recommendation  No change 
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'gradientUnits for <radialGradient>' in that specification.  Recommendation  Initial definition for <radialGradient>

Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'gradientUnits for <linearGradient>' in that specification.  Recommendation  Initial definition for <linearGradient>

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons AttributionShareAlike License v2.5 or later.
https://developer.mozilla.org/enUS/docs/Web/SVG/Attribute/gradientUnits