---
title: SVGAnimatedAngle
slug: Web/API/SVGAnimatedAngle
translation_of: Web/API/SVGAnimatedAngle
---
<div>{{APIRef("SVG")}}</div>

<h2 id="SVG_animated_angle_interface">SVG animated angle interface</h2>

<p>The <code>SVGAnimatedAngle</code> interface is used for attributes of basic type <a href="/en/SVG/Content_type#Angle" title="https://developer.mozilla.org/en/SVG/Content_type#Angle">&lt;angle&gt;</a> which can be animated.</p>

<h3 id="Interface_overview">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><em>None</em></td>
  </tr>
  <tr>
   <th scope="row">Properties</th>
   <td>
    <ul>
     <li>readonly {{ domxref("SVGAngle") }} <code>baseVal</code></li>
     <li>readonly {{ domxref("SVGAngle") }} <code>animVal</code></li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGAnimatedAngle">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("SVGAngle") }}</td>
   <td>The base value of the given attribute before applying any animations.</td>
  </tr>
  <tr>
   <td><code>animVal</code></td>
   <td>{{ domxref("SVGAngle") }}</td>
   <td>A read only {{ domxref("SVGAngle") }} representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the {{ domxref("SVGAngle") }} will have the same contents as <code>baseVal</code>. The object referenced by <code>animVal</code> will always be distinct from the one referenced by <code>baseVal</code>, even when the attribute is not animated.</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods">Methods</h2>

<p>The <code>SVGAnimatedAngle</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>Edge</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>{{CompatVersionUnknown}}</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>Edge</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>{{CompatVersionUnknown}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>