mozilla

Revision 426867 of patternUnits

  • Revision slug: Web/SVG/Attribute/patternUnits
  • Revision title: patternUnits
  • Revision id: 426867
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment page created, 179 words addedSVG/Attribute/patternUnits Web/SVG/Attribute/patternUnits

Revision Content

« SVG Attribute reference home

The patternUnits attribute defines the coordinate system for attributes {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}.

If the patternUnits 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 SVG 1.1 (2nd Edition)
userSpaceOnUse
{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} represent values in the current coordinate system that results from taking the current user coordinate system in place at the time when the {{ SVGElement("pattern") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("pattern") }} element via a {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} attribute) and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.
objectBoundingBox
the user coordinate system for attributes {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} is established using the bounding box of the element to which the pattern is applied and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.

Examples

Elements

The following elements can use the patternUnits attribute:

  • {{ SVGElement("pattern") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>patternUnits</code> attribute defines the coordinate system for attributes {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}.</p>
<p>If the <code>patternUnits</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><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElementPatternUnitsAttribute" title="http://www.w3.org/TR/SVG11/pservers.html#PatternElementPatternUnitsAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>userSpaceOnUse</dt> <dd>{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} represent values in the current coordinate system that results from taking the current user coordinate system in place at the time when the {{ SVGElement("pattern") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("pattern") }} element via a {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} attribute) and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.</dd> <dt>objectBoundingBox</dt> <dd>the user coordinate system for attributes {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} is established using the bounding box of the element to which the pattern is applied and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>patternUnits</code> attribute:</p>
<ul> <li>{{ SVGElement("pattern") }}</li>
</ul>
Revert to this revision