title: SVG Polyline Manipulation in TypeScript
body: <p>I am working with TypeScript 3.1.1 in VS Code with an Aurelia project.  I need to manipulate an SVG Polyline in TypeScript code. I am having trouble creating a new SVGPoint object. My initial HTML looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg class="distance-polyline-svg" width="100%" height="100%" ref="distancePolylineSvg"&gt;
      &lt;polyline points="100,100 300,100 200,300 500,300" style="stroke: rgba(6, 28, 129, 0.3); stroke-width: 5; fill: transparent" ref="distancePolyline" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>distancePolylineSvg</em> is declared as <em>SVGElement</em>
  <em>distancePolyline</em> is declared as <em>SVGPolylineElement</em></p>
  
  <p>I can access a point using:</p>
  
  <p><em>this.distancePolyline.points.getItem(i);</em>
  But when I try to create a new point to use in <em>this.distancePolyline.points.replaceItem</em> or <em>this.distancePolyline.points.appendItem</em> I am having no success. I've tried <em>new SVGPoint()</em> and get a bad constructor error. I've tried <em>new DOMPoint()</em>, which works but when using it in <em>replaceItem</em> I get an error stating it is expecting a parameter of type SVGPoint. Casting doesn't work. Neither SVGElement nor SVGPolygonElement have a <em>createSVGPoint</em> method and <em>document.rootElement.createSVGPoint</em> doesn't work because rootElement is null.</p>
  
  <p>How do I create a new SVGPoint to pass to the SVGPointList methods?</p>