gradientUnits

  • Revision slug: SVG/Attribute/gradientUnits
  • Revision title: gradientUnits
  • Revision id: 45439
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 506 words added

Revision Content

« SVG Attribute reference home

The gradientUnits attribute defines the coordinate system for attributes {{ SVGAttr("x1") }}, {{ SVGAttr("y1") }}, {{ SVGAttr("x2") }} and {{ SVGAttr("y2") }} on the {{ SVGElement("linearGradient") }} element or for attributes {{ SVGAttr("cx") }}, {{ SVGAttr("cy") }}, {{ SVGAttr("r") }}, {{ SVGAttr("fx") }}, and {{ SVGAttr("fy") }} on the {{ SVGElement("radialGradient") }}.

If the gradientUnits attribute isn't specified, then the effect is as if a value of objectBoundingBox were specified.

Usage context

Categories None
Value userSpaceOnUse | objectBoundingBox
Animatable Yes
Normative document
userSpaceOnUse
{{ SVGAttr("x1") }}, {{ SVGAttr("y1") }}, {{ SVGAttr("x2") }}, {{ SVGAttr("y2") }}, {{ SVGAttr("cx") }}, {{ SVGAttr("cy") }}, {{ SVGAttr("r") }}, {{ SVGAttr("fx") }} and {{ SVGAttr("fy") }} 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 {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} property) and then applying the transform specified by attribute {{ SVGAttr("gradientTransform") }}.
objectBoundingBox
for {{ SVGElement("linearGradient") }}: the user coordinate system for attributes {{ SVGAttr("x1") }}, {{ SVGAttr("y1") }}, {{ SVGAttr("x2") }} and {{ SVGAttr("y2") }} 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 {{ SVGAttr("gradientTransform") }}.
When gradientUnits="objectBoundingBox" and {{ SVGAttr("gradientTransform") }} is 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 non-perpendicular 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 non-uniform scaling transformation from bounding box space to user space.
for {{ SVGElement("radialGradient") }}: the user coordinate system for attributes {{ SVGAttr("cx") }}, {{ SVGAttr("cy") }}, {{ SVGAttr("r") }}, {{ SVGAttr("fx") }} and {{ SVGAttr("fy") }} 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 {{ SVGAttr("gradientTransform") }}.
When gradientUnits="objectBoundingBox" and {{ SVGAttr("gradientTransform") }} is the identity matrix, then 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 non-uniform scaling transformation from bounding box space to user space.

Examples

Elements

The following elements can use the gradientUnits attribute:

  • {{ SVGElement("linearGradient") }}
  • {{ SVGElement("radialGradient") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>gradientUnits</code> attribute defines the coordinate system for attributes {{ SVGAttr("x1") }}, {{ SVGAttr("y1") }}, {{ SVGAttr("x2") }} and {{ SVGAttr("y2") }} on the {{ SVGElement("linearGradient") }} element or for attributes {{ SVGAttr("cx") }}, {{ SVGAttr("cy") }}, {{ SVGAttr("r") }}, {{ SVGAttr("fx") }}, and {{ SVGAttr("fy") }} on the {{ SVGElement("radialGradient") }}.</p>
<p>If the <code>gradientUnits</code> attribute isn't specified, then the effect is as if a value of <code>objectBoundingBox</code> were specified.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td><em>None</em></td> </tr> <tr> <th scope="row">Value</th> <td><code>userSpaceOnUse</code> | <code><strong>objectBoundingBox</strong></code></td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td> <ul> <li><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementGradientUnitsAttribute" title="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementGradientUnitsAttribute">SVG 1.1 (2nd Edition): linearGradient</a></li> <li><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementGradientUnitsAttribute" title="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementGradientUnitsAttribute">SVG 1.1 (2nd Edition): radialGradient</a></li> </ul> </td> </tr> </tbody>
</table>
<dl> <dt>userSpaceOnUse</dt> <dd>{{ SVGAttr("x1") }}, {{ SVGAttr("y1") }}, {{ SVGAttr("x2") }}, {{ SVGAttr("y2") }}, {{ SVGAttr("cx") }}, {{ SVGAttr("cy") }}, {{ SVGAttr("r") }}, {{ SVGAttr("fx") }} and {{ SVGAttr("fy") }} 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 {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} property) and then applying the transform specified by attribute {{ SVGAttr("gradientTransform") }}.</dd> <dt>objectBoundingBox</dt> <dd>for {{ SVGElement("linearGradient") }}: the user coordinate system for attributes {{ SVGAttr("x1") }}, {{ SVGAttr("y1") }}, {{ SVGAttr("x2") }} and {{ SVGAttr("y2") }} 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 {{ SVGAttr("gradientTransform") }}.<br> When <code>gradientUnits="objectBoundingBox"</code> and {{ SVGAttr("gradientTransform") }} is 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 non-perpendicular 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 non-uniform scaling transformation from bounding box space to user space.</dd> <dd>for {{ SVGElement("radialGradient") }}: the user coordinate system for attributes {{ SVGAttr("cx") }}, {{ SVGAttr("cy") }}, {{ SVGAttr("r") }}, {{ SVGAttr("fx") }} and {{ SVGAttr("fy") }} 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 {{ SVGAttr("gradientTransform") }}.<br> When <code>gradientUnits="objectBoundingBox"</code> and {{ SVGAttr("gradientTransform") }} is the identity matrix, then 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 non-uniform scaling transformation from bounding box space to user space.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>gradientUnits</code> attribute:</p>
<ul> <li>{{ SVGElement("linearGradient") }}</li> <li>{{ SVGElement("radialGradient") }}</li>
</ul>
Revert to this revision