Angular 2 个带有 SVG <textPath> xlink:ref 属性的模板未通过 ID 引用关联的 <path>

Question

我有一个 Angular 2+ 组件，其模板中包含 SVG，并且运行良好。

template: `
<svg:path class="OutlineSegment" [attr.d]="svgPath" id="outlineSegmentPath"></svg:path>
<svg:text class="DartDistanceOnSeam">
    <svg:textPath alignment-baseline="top" xlink:href="#outlineSegmentPath">
       {{ length | number: '1.2-2' }} {{ displayUnit }}
    </svg:textPath>
</svg:text>
`

唉，组件的所有实例的所有文本都沿着相同的路径呈现，因为它们似乎引用相同的#outlineSegmentPath。

我似乎无法定位在此组件中创建的特定路径。当然，路径的 ID 属性在模板中是静态的。

我是否需要自己生成唯一 ID，或者它们是一种 Angular 将 ID 和 xlink:href 引用编织在一起的方法吗？

Answer 1

我通过生成自己的 id 来在路径和 textPath 标记中呈现来解决这个问题。我使用了 UUID。

private _id: string;
get id(): string { 
    if (!this._id) {
      this._id = UUID.UUID();  // from from 'angular2-uuid'
    }
    return this._id;
}
get hashId(): string {
  return `#${this.id}`;
}

并在模板中：

<svg:path [attr.d]="svgPath" [attr.id]="id"></svg:path>
<svg:text dy="-4">
    <svg:textPath [attr.xlink:href]="hashId">
        {{ length | number: '1.1-1' }} {{ displayUnit }}
    </svg:textPath>
</svg:text>

Angular 2 个带有 SVG <textPath> xlink:ref 属性的模板未通过 ID 引用关联的 <path>

Angular 2 template with SVG <textPath> xlink:ref attribute not referencing associated <path> via ID

angular

svg

xlink