Revision 959239 of SVGSVGElement

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

<h2 id="SVG_Svg_DOM_interface">SVG Svg DOM interface</h2>

<p>The <code>SVGSVGElement</code> interface provides access to the properties of {{ SVGElement("svg") }} elements, as well as methods to manipulate them. This interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices.</p>

<h3 id="Interface_overview">Interface overview</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Also&nbsp;implement</th>
   <td>{{ domxref("SVGElement") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGLocatable") }}, {{ domxref("SVGFitToViewBox") }}, {{ domxref("SVGZoomAndPan") }}, {{ domxref("DocumentEvent") }}, {{ domxref("ViewCSS") }}, {{ domxref("DocumentCSS") }}</td>
  </tr>
  <tr>
   <th scope="row">Methods</th>
   <td>
    <ul>
     <li><code>unsigned long suspendRedraw(in unsigned long maxWaitMilliseconds)</code></li>
     <li><code>void unsuspendRedraw(in unsigned long suspendHandleID)</code></li>
     <li><code>void unsuspendRedrawAll()</code></li>
     <li><code>void forceRedraw()</code></li>
     <li><code>void pauseAnimations()</code></li>
     <li><code>void unpauseAnimations()</code></li>
     <li><code>boolean animationsPaused()</code></li>
     <li><code>float getCurrentTime()</code></li>
     <li><code>void setCurrentTime(in float seconds)</code></li>
     <li><code>{{ domxref("NodeList") }} getIntersectionList(in {{ domxref("SVGRect") }} rect, in {{ domxref("SVGElement") }} referenceElement)</code></li>
     <li><code>{{ domxref("NodeList") }} getEnclosureList(in {{ domxref("SVGRect") }} rect, in {{ domxref("SVGElement") }} referenceElement)</code></li>
     <li><code>boolean checkIntersection(in {{ domxref("SVGElement") }} element, in {{ domxref("SVGRect") }} rect)</code></li>
     <li><code>boolean checkEnclosure(in {{ domxref("SVGElement") }} element, in {{ domxref("SVGRect") }} rect)</code></li>
     <li><code>void deselectAll()</code></li>
     <li><code>{{ domxref("SVGNumber") }} createSVGNumber()</code></li>
     <li><code>{{ domxref("SVGLength") }} createSVGLength()</code></li>
     <li><code>{{ domxref("SVGAngle") }} createSVGAngle()</code></li>
     <li><code>{{ domxref("SVGPoint") }} createSVGPoint()</code></li>
     <li><code>{{ domxref("SVGMatrix") }} createSVGMatrix()</code></li>
     <li><code>{{ domxref("SVGRect") }} createSVGRect()</code></li>
     <li><code>{{ domxref("SVGTransform") }} createSVGTransform()</code></li>
     <li><code>{{ domxref("SVGTransform") }} createSVGTransformFromMatrix(in {{ domxref("SVGMatrix") }} matrix)</code></li>
     <li><code>{{ domxref("Element") }} getElementById(in {{ domxref("DOMString") }} elementId)</code></li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">Properties</th>
   <td>
    <ul>
     <li>readonly {{ domxref("SVGAnimatedLength") }} <code>x</code></li>
     <li>readonly {{ domxref("SVGAnimatedLength") }} <code>y</code></li>
     <li>readonly {{ domxref("SVGAnimatedLength") }} <code>width</code></li>
     <li>readonly {{ domxref("SVGAnimatedLength") }} <code>height</code></li>
     <li>readonly {{ domxref("DOMString") }} <code>contentScriptType</code> {{deprecated_inline}}</li>
     <li>readonly {{ domxref("DOMString") }} <code>contentStyleType</code> {{deprecated_inline}}</li>
     <li>readonly {{ domxref("SVGRect") }} <code>viewport</code></li>
     <li>readonly float <code>pixelUnitToMillimeterX&nbsp;</code>{{deprecated_inline}}</li>
     <li>readonly float <code>pixelUnitToMillimeterY&nbsp;</code>{{deprecated_inline}}</li>
     <li>readonly float <code>screenPixelToMillimeterX&nbsp;</code>{{deprecated_inline}}</li>
     <li>readonly float <code>screenPixelToMillimeterY&nbsp;</code>{{deprecated_inline}}</li>
     <li>readonly boolean <code>useCurrentView</code></li>
     <li>readonly {{ domxref("SVGViewSpec") }} <code>currentView</code></li>
     <li>readonly {{ domxref("SVGPoint") }} <code>currentTranslate</code></li>
     <li>float <code>currentScale</code></li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">Normative&nbsp;document</th>
   <td><a class="external" href="https://www.w3.org/TR/SVG11/struct.html#InterfaceSVGSVGElement" title="https://www.w3.org/TR/SVG11/struct.html#InterfaceSVGSVGElement">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>x</code></td>
   <td>{{ domxref("SVGAnimatedLength") }}</td>
   <td>Corresponds to attribute {{ SVGAttr("x") }} on the given {{ SVGElement("svg") }} element.</td>
  </tr>
  <tr>
   <td><code>y</code></td>
   <td>{{ domxref("SVGAnimatedLength") }}</td>
   <td>Corresponds to attribute {{ SVGAttr("y") }} on the given {{ SVGElement("svg") }} element.</td>
  </tr>
  <tr>
   <td><code>width</code></td>
   <td>{{ domxref("SVGAnimatedLength") }}</td>
   <td>Corresponds to attribute {{ SVGAttr("width") }} on the given {{ SVGElement("svg") }} element.</td>
  </tr>
  <tr>
   <td><code>height</code></td>
   <td>{{ domxref("SVGAnimatedLength") }}</td>
   <td>Corresponds to attribute {{ SVGAttr("height") }} on the given {{ SVGElement("svg") }} element.</td>
  </tr>
  <tr>
   <td><code>contentScriptType</code></td>
   <td>{{ domxref("DOMString") }}</td>
   <td>Corresponds to attribute {{ SVGAttr("contentScriptType") }} on the given {{ SVGElement("svg") }} element.</td>
  </tr>
  <tr>
   <td><code>contentStyleType</code></td>
   <td>{{ domxref("DOMString") }}</td>
   <td>Corresponds to attribute {{ SVGAttr("contentStyleType") }} on the given {{ SVGElement("svg") }} element.</td>
  </tr>
  <tr>
   <td><code>viewport</code></td>
   <td>{{ domxref("SVGRect") }}</td>
   <td>The position and size of the viewport (implicit or explicit) that corresponds to this {{ SVGElement("svg") }} element. When the browser is actually rendering the content, then the position and size values represent the actual values when rendering. The position and size values are unitless values in the coordinate system of the parent element. If no parent element exists (i.e., {{ SVGElement("svg") }} element represents the root of the document tree), if this SVG document is embedded as part of another document (e.g., via the HTML {{ HTMLElement("object") }} element), then the position and size are unitless values in the coordinate system of the parent document. (If the parent uses CSS or XSL layout, then unitless values represent pixel units for the current CSS or XSL viewport.)</td>
  </tr>
  <tr>
   <td><code>pixelUnitToMillimeterX&nbsp;</code>{{deprecated_inline}}</td>
   <td>float</td>
   <td>Size of a pixel units (as defined by CSS2) along the x-axis of the viewport, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium. On systems where it is impossible to know the size of a pixel, a suitable default pixel size is provided.</td>
  </tr>
  <tr>
   <td><code>pixelUnitToMillimeterY&nbsp;</code>{{deprecated_inline}}</td>
   <td>float</td>
   <td>Corresponding size of a pixel unit along the y-axis of the viewport.</td>
  </tr>
  <tr>
   <td><code>screenPixelToMillimeterX&nbsp;</code>{{deprecated_inline}}</td>
   <td>float</td>
   <td>User interface (UI) events in DOM Level 2 indicate the screen positions at which the given UI event occurred. When the browser actually knows the physical size of a "screen unit", this attribute will express that information; otherwise, user agents will provide a suitable default value such as .28mm.</td>
  </tr>
  <tr>
   <td><code>screenPixelToMillimeterY&nbsp;</code>{{deprecated_inline}}</td>
   <td>float</td>
   <td>Corresponding size of a screen pixel along the y-axis of the viewport.</td>
  </tr>
  <tr>
   <td><code>useCurrentView</code></td>
   <td>boolean</td>
   <td>The initial view (i.e., before magnification and panning) of the current innermost SVG document fragment can be either the "standard" view (i.e., based on attributes on the {{ SVGElement("svg") }} element such as {{ SVGAttr("viewBox") }}) or to a "custom" view (i.e., a hyperlink into a particular {{ SVGElement("view") }} or other element). If the initial view is the "standard" view, then this attribute is false. If the initial view is a "custom" view, then this attribute is true.</td>
  </tr>
  <tr>
   <td><code>currentView</code></td>
   <td>{{ domxref("SVGViewSpec") }}</td>
   <td>The definition of the initial view (i.e., before magnification and panning) of the current innermost SVG document fragment. The meaning depends on the situation:
    <ul>
     <li>If the initial view was a "standard" view, then:
      <ul>
       <li>the values for {{ SVGAttr("viewBox") }}, {{ SVGAttr("preserveAspectRatio") }} and {{ SVGAttr("zoomAndPan") }} within {{ SVGAttr("currentView") }} will match the values for the corresponding DOM attributes that are on <code>SVGSVGElement</code> directly</li>
       <li>the values for {{ SVGAttr("transform") }} and {{ SVGAttr("viewTarget") }} within {{ SVGAttr("currentView") }} will be null</li>
      </ul>
     </li>
     <li>If the initial view was a link into a {{ SVGElement("view") }} element, then:
      <ul>
       <li>the values for {{ SVGAttr("viewBox") }}, {{ SVGAttr("preserveAspectRatio") }} and {{ SVGAttr("zoomAndPan") }} within {{ SVGAttr("currentView") }} will correspond to the corresponding attributes for the given {{ SVGElement("view") }} element</li>
       <li>the values for {{ SVGAttr("transform") }} and {{ SVGAttr("viewTarget") }} within {{ SVGAttr("currentView") }} will be null</li>
      </ul>
     </li>
     <li>If the initial view was a link into another element (i.e., other than a {{ SVGElement("view") }}), then:
      <ul>
       <li>the values for {{ SVGAttr("viewBox") }}, {{ SVGAttr("preserveAspectRatio") }} and {{ SVGAttr("zoomAndPan") }} within {{ SVGAttr("currentView") }} will match the values for the corresponding DOM attributes that are on <code>SVGSVGElement</code> directly for the closest ancestor {{ SVGElement("svg") }} element</li>
       <li>the values for {{ SVGAttr("transform") }} within {{ SVGAttr("currentView") }} will be null</li>
       <li>the {{ SVGAttr("viewTarget") }} within {{ SVGAttr("currentView") }} will represent the target of the link</li>
      </ul>
     </li>
     <li>If the initial view was a link into the SVG document fragment using an SVG view specification fragment identifier (i.e., #svgView(...)), then:
      <ul>
       <li>the values for {{ SVGAttr("viewBox") }}, {{ SVGAttr("preserveAspectRatio") }}, {{ SVGAttr("zoomAndPan") }}, {{ SVGAttr("transform") }} and {{ SVGAttr("viewTarget") }} within {{ SVGAttr("currentView") }} will correspond to the values from the SVG view specification fragment identifier</li>
      </ul>
     </li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code>currentTranslate</code></td>
   <td>{{ domxref("SVGPoint") }}</td>
   <td>On an outermost {{ SVGElement("svg") }} element, the corresponding translation factor that takes into account user "magnification".</td>
  </tr>
  <tr>
   <td><code>currentScale</code></td>
   <td>float</td>
   <td>On an outermost {{ SVGElement("svg") }} element, this attribute indicates the current scale factor relative to the initial view to take into account user magnification and panning operations. DOM attributes <code>currentScale</code> and <code>currentTranslate</code> are equivalent to the 2x3 matrix <code>[a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]</code>. If "magnification" is enabled (i.e., <code>zoomAndPan="magnify"</code>), then the effect is as if an extra transformation were placed at the outermost level on the SVG document fragment (i.e., outside the outermost {{ SVGElement("svg") }} element).</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods">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>suspendRedraw</strong>(in unsigned long <em>maxWaitMilliseconds</em>)</code></td>
   <td>unsigned&nbsp;long</td>
   <td>
    <p>Takes a time-out value which indicates that redraw shall not occur until:</p>

    <ol>
     <li>the corresponding unsuspendRedraw() call has been made,</li>
     <li>an unsuspendRedrawAll() call has been made, or</li>
     <li>its timer has timed out.</li>
    </ol>

    <p>In environments that do not support interactivity (e.g., print media), then redraw shall not be suspended. Calls to <code>suspendRedraw()</code> and <code>unsuspendRedraw()</code> should, but need not be, made in balanced pairs.</p>

    <p>To suspend redraw actions as a collection of SVG DOM changes occur, precede the changes to the SVG DOM with a method call similar to:</p>

    <p><code>suspendHandleID = suspendRedraw(maxWaitMilliseconds);</code></p>

    <p>and follow the changes with a method call similar to:</p>

    <p><code>unsuspendRedraw(suspendHandleID);</code></p>

    <p>Note that multiple suspendRedraw calls can be used at once and that each such method call is treated independently of the other suspendRedraw method calls.</p>
   </td>
  </tr>
  <tr>
   <td><code><strong>unsuspendRedraw</strong>(in unsigned long <em>suspendHandleID</em>)</code></td>
   <td><em>void</em></td>
   <td>Cancels a specified <code>suspendRedraw()</code> by providing a unique suspend handle ID that was returned by a previous <code>suspendRedraw()</code> call.</td>
  </tr>
  <tr>
   <td><code><strong>unsuspendRedrawAll</strong>()</code></td>
   <td><em>void</em></td>
   <td>Cancels all currently active <code>suspendRedraw()</code> method calls. This method is most useful at the very end of a set of SVG DOM calls to ensure that all pending <code>suspendRedraw()</code> method calls have been cancelled.</td>
  </tr>
  <tr>
   <td><code><strong>forceRedraw</strong>()</code></td>
   <td><em>void</em></td>
   <td>In rendering environments supporting interactivity, forces the user agent to immediately redraw all regions of the viewport that require updating.</td>
  </tr>
  <tr>
   <td><code><strong>pauseAnimations</strong>()</code></td>
   <td><em>void</em></td>
   <td>Suspends (i.e., pauses) all currently running animations that are defined within the SVG document fragment corresponding to this {{ SVGElement("svg") }} element, causing the animation clock corresponding to this document fragment to stand still until it is unpaused.</td>
  </tr>
  <tr>
   <td><code><strong>unpauseAnimations</strong>()</code></td>
   <td><em>void</em></td>
   <td>Unsuspends (i.e., unpauses) currently running animations that are defined within the SVG document fragment, causing the animation clock to continue from the time at which it was suspended.</td>
  </tr>
  <tr>
   <td><code><strong>animationsPaused</strong>()</code></td>
   <td>boolean</td>
   <td>Returns true if this SVG document fragment is in a paused state.</td>
  </tr>
  <tr>
   <td><code><strong>getCurrentTime</strong>()</code></td>
   <td><em>float</em></td>
   <td>Returns the current time in seconds relative to the start time for the current SVG document fragment. If getCurrentTime is called before the document timeline has begun (for example, by script running in a {{ SVGElement("script") }} element before the document's SVGLoad event is dispatched), then 0 is returned.</td>
  </tr>
  <tr>
   <td><code><strong>setCurrentTime</strong>(in float <em>seconds</em>)</code></td>
   <td><em>void</em></td>
   <td>Adjusts the clock for this SVG document fragment, establishing a new current time. If <code>setCurrentTime</code> is called before the document timeline has begun (for example, by script running in a {{ SVGElement("script") }} element before the document's SVGLoad event is dispatched), then the value of seconds in the last invocation of the method gives the time that the document will seek to once the document timeline has begun.</td>
  </tr>
  <tr>
   <td><code><strong>getIntersectionList</strong>(in {{ domxref("SVGRect") }} <em>rect</em>, in {{ domxref("SVGElement") }} <em>referenceElement</em>)</code></td>
   <td>{{ domxref("NodeList") }}</td>
   <td>Returns the list of graphics elements whose rendered content intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in {{ SVGAttr("pointer-events") }} processing.</td>
  </tr>
  <tr>
   <td><strong><code>getEnclosureList</code></strong><code>(in {{ domxref("SVGRect") }} <em>rect</em>, in {{ domxref("SVGElement") }} <em>referenceElement</em>)</code></td>
   <td>{{ domxref("NodeList") }}</td>
   <td>Returns the list of graphics elements whose rendered content is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in {{ SVGAttr("pointer-events") }} processing.</td>
  </tr>
  <tr>
   <td><code><strong>checkIntersection</strong>(in {{ domxref("SVGElement") }} <em>element</em>, in {{ domxref("SVGRect") }} <em>rect</em>)</code></td>
   <td>boolean</td>
   <td>Returns true if the rendered content of the given element intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in {{ SVGAttr("pointer-events") }} processing.</td>
  </tr>
  <tr>
   <td><code><strong>checkEnclosure</strong>(in {{ domxref("SVGElement") }} <em>element</em>, in {{ domxref("SVGRect") }} <em>rect</em>)</code></td>
   <td>boolean</td>
   <td>Returns true if the rendered content of the given element is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in {{ SVGAttr("pointer-events") }} processing.</td>
  </tr>
  <tr>
   <td><code><strong>deselectAll</strong>()</code></td>
   <td><em>void</em></td>
   <td>Unselects any selected objects, including any selections of text strings and type-in bars.</td>
  </tr>
  <tr>
   <td><code><strong>createSVGNumber</strong>()</code></td>
   <td>{{ domxref("SVGNumber") }}</td>
   <td>Creates an <code>SVGNumber</code> object outside of any document trees. The object is initialized to a value of zero.</td>
  </tr>
  <tr>
   <td><code><strong>createSVGLength</strong>()</code></td>
   <td>{{ domxref("SVGLength") }}</td>
   <td>Creates an <code>SVGLength</code> object outside of any document trees. The object is initialized to a value of zero user units.</td>
  </tr>
  <tr>
   <td><code><strong>createSVGAngle</strong>()</code></td>
   <td>{{ domxref("SVGAngle") }}</td>
   <td>Creates an <code>SVGAngle</code> object outside of any document trees. The object is initialized to a value of zero degrees (unitless).</td>
  </tr>
  <tr>
   <td><code><strong>createSVGPoint</strong>()</code></td>
   <td>{{ domxref("SVGPoint") }}</td>
   <td>Creates an <code>SVGPoint</code> object outside of any document trees. The object is initialized to the point (0,0) in the user coordinate system.</td>
  </tr>
  <tr>
   <td><code><strong>createSVGMatrix</strong>()</code></td>
   <td>{{ domxref("SVGMatrix") }}</td>
   <td>Creates an <code>SVGMatrix</code> object outside of any document trees. The object is initialized to the identity matrix.</td>
  </tr>
  <tr>
   <td><code><strong>createSVGRect</strong>()</code></td>
   <td>{{ domxref("SVGRect") }}</td>
   <td>Creates an <code>SVGRect</code> object outside of any document trees. The object is initialized such that all values are set to 0 user units.</td>
  </tr>
  <tr>
   <td><code><strong>createSVGTransform</strong>()</code></td>
   <td>{{ domxref("SVGTransform") }}</td>
   <td>Creates an <code>SVGTransform</code> object outside of any document trees. The object is initialized to an identity matrix transform (<code>SVG_TRANSFORM_MATRIX</code>).</td>
  </tr>
  <tr>
   <td><code><strong>createSVGTransformFromMatrix</strong>(in {{ domxref("SVGMatrix") }} <em>matrix</em>)</code></td>
   <td>{{ domxref("SVGTransform") }}</td>
   <td>Creates an <code>SVGTransform</code> object outside of any document trees. The object is initialized to the given matrix transform (i.e., <code>SVG_TRANSFORM_MATRIX</code>). The values from the parameter matrix are copied, the matrix parameter is not adopted as <code>SVGTransform::matrix</code>.</td>
  </tr>
  <tr>
   <td><code><strong>getElementById</strong>(in {{ domxref("DOMString") }} <em>elementId</em>)</code></td>
   <td>{{ domxref("Element") }}</td>
   <td>Searches this SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an Element whose id is given by <em>elementId</em>. If an Element is found, that Element is returned. If no such element exists, returns null. Behavior is not defined if more than one element has this id.</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>9.0</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><code>getElementById()</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("11") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>useCurrentView</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("15") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>contentStyleType</code> and <code>contentStyleScript</code> {{deprecated_inline}} (Removed from SVG2)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}<br />
    Removed in {{ CompatGeckoDesktop("20") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>pixelUnitToMillimeterX</code>, <code>pixelUnitToMillimeterY</code>, <code>screenPixelToMillimeterX</code>, and <code>screenPixelToMillimeterY</code></td>
   <td>{{CompatNo}} [1]</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>getElementById()</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("11") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>useCurrentView</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("15") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>contentStyleType</code> and <code>contentStyleScript </code>{{deprecated_inline}} (Removed from SVG2)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatNo}} [1]</td>
   <td>{{ CompatVersionUnknown() }}<br />
    Removed in {{ CompatGeckoMobile("20") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatNo}} [1]</td>
  </tr>
 </tbody>
</table>

</div>
<p>[1] Removed in Chrome 47.&nbsp;</p>
<h2 id="See_also">See also</h2>

<ul>
 <li>{{ SVGElement("circle") }} SVG Element</li>
</ul>