mozilla

Revision 94542 of rx

  • Revision slug: SVG/Attribute/rx
  • Revision title: rx
  • Revision id: 94542
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 175 words added

Revision Content

« SVG Attribute reference home

For the {{ SVGElement("ellipse") }} element, this attribute define the x-radius of the element. A value of zero disables rendering of the element.

For the {{ SVGElement("rect") }} element, this attribute define the x-axis radius of the ellipse used to round off the corners of the rectangle. If a properly specified value is provided for rx but not for {{ SVGAttr("ry") }} (or the opposite), then the browser will consider the missing value equal to the defined one. If neither rx nor {{ SVGAttr("ry") }} has a properly specified value, then the browser will draw a rectangle with square corners. If rx is greater than half of the width of the rectangle, then the browser will consider the value for rx as half of the width of the rectangle.

Usage context

Categories None
Value <length>
Animatable Yes
Normative document SVG 1.1 (2nd Edition): The ellipse element
SVG 1.1 (2nd Edition): The rect element

{{ page("/en/SVG/Content_type","Length") }}

Example

Elements

The following elements can use the rx attribute

  • {{ SVGElement("ellipse") }}
  • {{ SVGElement("rect") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>For the {{ SVGElement("ellipse") }} element, this attribute define the x-radius of the element. A value of zero disables rendering of the element.</p>
<p>For the {{ SVGElement("rect") }} element, this attribute define the x-axis radius of the ellipse used to round off the corners of the rectangle. If a properly specified value is provided for <code>rx</code> but not for {{ SVGAttr("ry") }} (or the opposite), then the browser will consider the missing value equal to the defined one. If neither <code>rx</code> nor {{ SVGAttr("ry") }} has a properly specified value, then the browser will draw a rectangle with square corners. If <code>rx</code> is greater than half of the width of the rectangle, then the browser will consider the value for <code>rx</code> as half of the width of the rectangle.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>None</td> </tr> <tr> <th scope="row">Value</th> <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a></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/SVG/shapes.html#EllipseElementRXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementRXAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br> <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementRXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementRXAttribute">SVG 1.1 (2nd Edition): The rect element</a></td> </tr> </tbody>
</table>
<p>{{ page("/en/SVG/Content_type","Length") }}</p>
<h2>Example</h2>
<h2>Elements</h2>
<p>The following elements can use the <code>rx</code> attribute</p>
<ul> <li>{{ SVGElement("ellipse") }}</li> <li>{{ SVGElement("rect") }}</li>
</ul>
Revert to this revision