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:
<svg class="distance-polyline-svg" width="100%" height="100%" ref="distancePolylineSvg">
<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" />
</svg>
distancePolylineSvg is declared as SVGElement distancePolyline is declared as SVGPolylineElement
I can access a point using:
this.distancePolyline.points.getItem(i); But when I try to create a new point to use in this.distancePolyline.points.replaceItem or this.distancePolyline.points.appendItem I am having no success. I've tried new SVGPoint() and get a bad constructor error. I've tried new DOMPoint(), which works but when using it in replaceItem I get an error stating it is expecting a parameter of type SVGPoint. Casting doesn't work. Neither SVGElement nor SVGPolygonElement have a createSVGPoint method and document.rootElement.createSVGPoint doesn't work because rootElement is null.
How do I create a new SVGPoint to pass to the SVGPointList methods?