TypeScript中的SVG多段线操作

我正在一个Aurelia项目的VS代码中使用TypeScript 3.1.1。我需要在TypeScript代码中操作SVG多段线。创建新的SVGPoint对象时遇到问题。我的初始HTML如下所示：

---

您的

元素应该建模为一个SVGSVGElement，它们有一个返回`SVGPoint对象的方法

我已经用打字更新了gist.run

正如Robert提到的，您需要将

元素键入为SVGSVGElement

SVGDOMAPI规范目前缺少一种从HTMLDOMEllements获取准确类型SVG元素的方法，这在TypeScript中得到了反映。但是，从domapi返回的实际对象实际上是svgdom元素。因此，您需要对HTML DOM查询使用强制转换，然后手动将它们键入SVG DOM元素

let svg: SVGSVGElement = <any>document.getElementById('svg');
let polyline: SVGPolylineElement = <any>svg.getElementById('polyline');
let point: SVGPoint = svg.createSVGPoint();
point.x = 0;
point.y = 0;
polyline.points.appendItem(point);

查看模型

export class SVGViewModel {
  svg: SVGSVGElement;
  polyline: SVGPolylineElement;
  addPoint(x: number, y: number) {
    const point: SVGPoint = this.svg.createSVGPoint();
    point.x = x
    point.y = y;
    this.polyline.points.appendItem(point)
  }
}

---

嘿，托尼！我添加了SVG标记，因为这更像是一个SVG问题。你能把你的代码添加到gist.run中吗？这样我就可以仔细看看了。您可以从以下模板开始：。

export class SVGViewModel {
  svg: SVGSVGElement;
  polyline: SVGPolylineElement;
  addPoint(x: number, y: number) {
    const point: SVGPoint = this.svg.createSVGPoint();
    point.x = x
    point.y = y;
    this.polyline.points.appendItem(point)
  }
}