I am working with TypeScript 3.1.1 in VS Code. 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:
But when I try to create a new point to use in
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?