Revision 50289 of SVGLength

<h2>SVG length interface</h2>
<p>The <code>SVGLength</code> interface correspond to the <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> basic data type.</p>
<p>An <code>SVGLength</code> object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.</p>
<h3>Interface overview</h3>
<table class="standard-table"> <tbody> <tr> <th scope="row">Also implement</th> <td><em>None</em></td> </tr> <tr> <th scope="row">Methods</th> <td> <ul> <li><code>void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)</code></li> <li><code>void convertToSpecifiedUnits(in unsigned short unitType)</code></li> </ul> </td> </tr> <tr> <th scope="row">Properties</th> <td> <ul> <li>readonly unsigned short <code>unitType</code></li> <li>float <code>value</code></li> <li>float <code>valueInSpecifiedUnits</code></li> <li>{{ domxref("DOMString") }} <code>valueAsString</code></li> </ul> </td> </tr> <tr> <th scope="row">Constants</th> <td> <ul> <li><code>SVG_LENGTHTYPE_UNKNOWN</code> = 0</li> <li><code>SVG_LENGTHTYPE_NUMBER</code> = 1</li> <li><code>SVG_LENGTHTYPE_PERCENTAGE</code> = 2</li> <li><code>SVG_LENGTHTYPE_EMS</code> = 3</li> <li><code>SVG_LENGTHTYPE_EXS</code> = 4</li> <li><code>SVG_LENGTHTYPE_PX</code> = 5</li> <li><code>SVG_LENGTHTYPE_CM</code> = 6</li> <li><code>SVG_LENGTHTYPE_MM</code> = 7</li> <li><code>SVG_LENGTHTYPE_IN</code> = 8</li> <li><code>SVG_LENGTHTYPE_PT</code> = 9</li> <li><code>SVG_LENGTHTYPE_PC</code> = 10</li> </ul> </td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGLength" title="https://www.w3.org/TR/SVG11/types.html#InterfaceSVGLength">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<h2>Constants</h2>
<table class="standard-table"> <tbody> <tr> <th>Name</th> <th>Value</th> <th>Description</th> </tr> <tr> <td><code>SVG_LENGTHTYPE_UNKNOWN</code></td> <td>0</td> <td>The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>NUMBER</code></td> <td>1</td> <td>No unit type was provided (i.e., a unitless value was specified), which indicates a value in user units.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>PERCENTAGE</code></td> <td>2</td> <td>A percentage value was specified.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>EMS</code></td> <td>3</td> <td>A value was specified using the em units defined in CSS2.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>EXS</code></td> <td>4</td> <td>A value was specified using the ex units defined in CSS2.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>PX</code></td> <td>5</td> <td>A value was specified using the px units defined in CSS2.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>CM</code></td> <td>6</td> <td>A value was specified using the cm units defined in CSS2.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>MM</code></td> <td>7</td> <td>A value was specified using the mm units defined in CSS2.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>IN</code></td> <td>8</td> <td>A value was specified using the in units defined in CSS2.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>PT</code></td> <td>9</td> <td>A value was specified using the pt units defined in CSS2.</td> </tr> <tr> <td><code>SVG_LENGTHTYPE_</code><code>PC</code></td> <td>10</td> <td>A value was specified using the pc units defined in CSS2.</td> </tr> </tbody>
</table>
<h2>Properties</h2>
<table class="standard-table"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>unitType</code></td> <td>unsigned short</td> <td>The type of the value as specified by one of the SVG_LENGTHTYPE_* constants defined on this interface.</td> </tr> <tr> <td><code>value</code></td> <td>float</td> <td> <p>The value as a floating point value, in user units. Setting this attribute will cause <code>valueInSpecifiedUnits</code> and <code>valueAsString</code> to be updated automatically to reflect this setting.</p> <p><strong>Exceptions on setting:</strong> a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when the length corresponds to a read only attribute or when the object itself is read only.</p> </td> </tr> <tr> <td><code>valueInSpecifiedUnits</code></td> <td>float</td> <td> <p>The value as a floating point value, in the units expressed by <code>unitType</code>. Setting this attribute will cause <code>value</code> and <code>valueAsString</code> to be updated automatically to reflect this setting.</p> <p><strong>Exceptions on setting:</strong> a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when the length corresponds to a read only attribute or when the object itself is read only.</p> </td> </tr> <tr> <td><code>valueAsString</code></td> <td>{{ domxref("DOMString") }}</td> <td> <p>The value as a string value, in the units expressed by <code>unitType</code>. Setting this attribute will cause <code>value</code>, <code>valueInSpecifiedUnits</code> and <code>unitType</code> to be updated automatically to reflect this setting.</p> <p><strong>Exceptions on setting:</strong></p> <ul> <li>a {{ domxref("DOMException") }} with code <code>SYNTAX_ERR</code> is raised if the assigned string cannot be parsed as a valid <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>.</li> <li>a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when the length corresponds to a read only attribute or when the object itself is read only.</li> </ul> </td> </tr> </tbody>
</table>
<h2>Methods</h2>
<table class="standard-table"> <thead> <tr> <th>Name &amp; Arguments</th> <th>Return</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code><strong>newValueSpecifiedUnits</strong>(in unsigned short <em>unitType</em>, in float <em>valueInSpecifiedUnits</em>)</code></td> <td><em>void</em></td> <td> <p>Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object.</p> <p><strong>Exceptions:</strong></p> <ul> <li>a {{ domxref("DOMException") }} with code <code>NOT_SUPPORTED_ERR</code> is raised if <code>unitType</code> is <code>SVG_LENGTHTYPE_UNKNOWN</code> or not a valid unit type constant (one of the other <code>SVG_LENGTHTYPE_*</code> constants defined on this interface).</li> <li>a {{ domxref("DOMException") }} with code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when the length corresponds to a read only attribute or when the object itself is read only.</li> </ul> </td> </tr> <tr> <td><code><strong>convertToSpecifiedUnits</strong>(in unsigned short <em>unitType</em>)</code></td> <td><em>void</em></td> <td>Preserve the same underlying stored value, but reset the stored unit identifier to the given <code><em>unitType</em></code>. Object attributes <code>unitType</code>, <code>valueInSpecifiedUnits</code> and <code>valueAsString</code> might be modified as a result of this method. For example, if the original value were "<em>0.5cm</em>" and the method was invoked to convert to millimeters, then the <code>unitType</code> would be changed to <code>SVG_LENGTHTYPE_MM</code>, <code>valueInSpecifiedUnits</code> would be changed to the numeric value 5 and <code>valueAsString</code> would be changed to "<em>5mm</em>".</td> </tr> </tbody>
</table>
<h2 name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatNo() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>