title: Selecting an SVG Circle with TypeScript
body: <p>I have a very simple SVG <code>&lt;circle&gt;</code> element in my DOM that I want to select with TypeScript:</p>
  <pre><code>&lt;svg viewBox=&quot;0 0 200 200&quot;&gt;
    &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;45&quot; id=&quot;myCircle&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>
  <hr />
  <h2>First attempt:</h2>
  <p>I try to select the circle as follows:</p>
  <p><code>var circle: SVGCircleElement = document.getElementById(&quot;myCircle&quot;);</code></p>
  <p>but I get the error:</p>
  <blockquote>
  <p>Type 'HTMLElement' is missing the following properties: cx, cy, r.</p>
  </blockquote>
  <p>Ok, fair enough. So I try type-assertion:</p>
  <h2>Second attempt:</h2>
  <p><code>var circle: SVGCircleElement = (&lt;SVGCircleElement&gt;document.getElementById(&quot;myCircle&quot;));</code></p>
  <p>and I get the error:</p>
  <blockquote>
  <p>Conversion of type HTMLElement to SVGCircleElement may be a mistake because...</p>
  </blockquote>
  <p>This method of selecting elements seems to work with other elements, such as a <code>&lt;canvas&gt;</code> but not for SVGs:</p>
  <p><a href="https://i.stack.imgur.com/g6VxD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g6VxD.jpg" alt="enter image description here" /></a></p>
  <h2>Question:</h2>
  <p>What is the TypeScript-approved way of selecting <code>myCircle</code> from the DOM, preferably without resorting to type coercion? (By the way, I'm using Typescript 3.3)</p>