SVGAnimatedLength

  • Revision slug: Web/API/SVGAnimatedLength
  • Revision title: SVGAnimatedLength
  • Revision id: 470561
  • Created:
  • Creator: kscarfone
  • Is current revision? Yes
  • Comment Updated tags

Revision Content

SVG animated length interface

The SVGAnimatedLength interface is used for attributes of basic type <length> which can be animated.

Interface overview

Also implement None
Methods None
Properties
  • readonly {{ domxref("SVGLength") }} baseVal
  • readonly {{ domxref("SVGLength") }} animVal
Normative document SVG 1.1 (2nd Edition)

Properties

Name Type Description
baseVal {{ domxref("SVGLength") }} The base value of the given attribute before applying any animations.
animVal {{ domxref("SVGLength") }} If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

Methods

The SVGAnimatedLength interface do not provide any specific methods.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

Revision Source

<h2 id="SVG_animated_length_interface">SVG animated length interface</h2>
<p>The <code>SVGAnimatedLength</code> interface is used for attributes of basic type <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> which can be animated.</p>
<h3 id="Interface_overview">Interface overview</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Also&nbsp;implement</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Methods</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Properties</th>
      <td>
        <ul>
          <li>readonly {{ domxref("SVGLength") }} <code>baseVal</code></li>
          <li>readonly {{ domxref("SVGLength") }} <code>animVal</code></li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">Normative&nbsp;document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGAnimatedLength" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGAnimatedLength">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Properties">Properties</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>baseVal</code></td>
      <td>{{ domxref("SVGLength") }}</td>
      <td>The base value of the given attribute before applying any animations.</td>
    </tr>
    <tr>
      <td><code>animVal</code></td>
      <td>{{ domxref("SVGLength") }}</td>
      <td>If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as <code>baseVal</code>.</td>
    </tr>
  </tbody>
</table>
<h2 id="Methods">Methods</h2>
<p>The <code>SVGAnimatedLength</code> interface do not provide any specific methods.</p>
<h2 id="Browser_compatibility" 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>
<p>&nbsp;</p>
Revert to this revision