Revision 1029542 of SVGAnimatedString

<div>{{APIRef("SVG")}}</div>

<div>&nbsp;</div>

<p>The<code><strong> SVGAnimatedString </strong></code>interface represent string attributes which can be animated from each SVG declaration. You need to create SVG attribute before doing anything else, Everything should be decalre inside this.</p>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("SVGAnimatedString.animVal")}} {{readonlyInline}}</dt>
 <dd><span class="field"><span class="_animVal doc">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 </span></span>baseVal<span class="field"><span class="_animVal doc">.</span></span></dd>
 <dt>{{domxref("SVGAnimatedString.baseVal")}}</dt>
 <dd><span class="field"><span class="_baseVal doc">The base value of the given attribute before applying any animations. Setter throws DOMException.</span></span></dd>
</dl>

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

<p><em>The <code>SVGAnimatedString</code> interface do not provide any specific methods.</em></p>

<h2 id="Examples">Examples</h2>

<p>Basic&nbsp; declaration :</p>

<pre class="lang-js prettyprint prettyprinted">
interface <strong>SVGAnimatedString</strong> {
           attribute DOMString <a href="https://www.w3.org/TR/SVG/types.html#__svg__SVGAnimatedString__baseVal">baseVal</a> setraises(<a class="idlinterface" href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187">DOMException</a>);
  readonly attribute DOMString <a href="https://www.w3.org/TR/SVG/types.html#__svg__SVGAnimatedString__animVal">animVal</a>;
};</pre>

<p><code><span class="com">Below example set a split prototype on the SVGAnimatedString object which will return the split of the baseVal on this</span><span class="pln">.</span></code></p>

<pre class="lang-js prettyprint prettyprinted">
<code><span class="typ">SVGAnimatedString</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">split </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> </span>
<span class="kwd">return</span><span class="pln"> </span><span class="typ">String</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">split</span><span class="pun">.</span><span class="pln">apply</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">baseVal</span><span class="pun">,</span><span class="pln"> arguments</span><span class="pun">);</span><span class="pln"> 
</span><span class="pun">};</span></code></pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Scalable Vector Graphics (SVG) 1.1 (Second Edition)', '#InterfaceSVGAnimatedString')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<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>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatNo}}</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>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>&nbsp;</p>