Question

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

<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 被声明为 SVGElement distancePolyline 被声明为 SVGPolylineElement

我可以使用：

this.distancePolyline.points.getItem（i）; 但是，当我尝试创建要在 this.distancePolyline.points.replaceItem 或 this.distancePolyline.points.appendItem 中使用的新点时，我没有成功。我尝试了 new SVGPoint（）并收到了错误的构造方法错误。我试过了 new DOMPoint（），它可以工作，但是在 replaceItem 中使用它时，我收到一条错误消息，指出它期望使用SVGPoint类型的参数。投放无效。 SVGElement和SVGPolygonElement都不具有 createSVGPoint 方法，并且 document.rootElement.createSVGPoint 无效，因为rootElement为空。

如何创建新的SVGPoint传递给SVGPointList方法？

Answer 1

您的<svg>元素应建模为SVGSVGElement，它们具有createSVGPoint方法，该方法返回`SVGPoint对象。

Answer 2

我已通过键入更新了gist.run。 https://gist.run/?id=040775f06aba5e955afd362ee60863aa

如罗伯特所说，您需要将<svg>元素键入为SVGSVGElement。

SVG DOM API规范当前缺乏一种从HTML DOM元素中获取准确键入的SVG元素的方法，这在TypeScript中得到了体现。但是，从DOM API返回的实际对象实际上是SVG DOM元素。因此，您需要对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);

尽管Aurelia的element.ref基本上可以为您做同样的事情，但它看起来还是比较干净。

视图

<template>
  <svg element.ref="svg">
    <polyline element.ref="polyline"></polyline>
  </svg>
</template>

视图模型

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)
  }
}

TypeScript中的SVG折线操作

2 个答案: