3

我试图在我的 svg 图形中包含一个图标，我需要将图标路径作为变量传递，因为图标会根据我显示的图形而变化。我试过下面的代码：

<ng-template #nodeTemplate let-node>
  <svg:g *ngIf="node.iconUrl" class="node"
ngx-tooltip
[tooltipPlacement]="'top'"
[tooltipType]="'tooltip'"
[tooltipTitle]="node.position"
>
    <svg:rect [attr.width]="node.width + 30" [attr.height]="node.height + 10" [attr.fill]="node.options.color" stroke="#000000"/>
    <svg:image xlink:href="{{node.iconUrl}}" 
    [attr.x]="10" [attr.y]="(node.height / 2) - 5" height="20" width="20"/>
    <svg:text alignment-baseline="central" [attr.x]="35" [attr.y]="(node.height / 2) + 5">{{node.label}} - {{node.iconUrl}}</svg:text>
  </svg:g>
</ng-template>

但是，这给了我一个控制台错误（我只包括前几行）：

未捕获的错误：模板解析错误：无法绑定到 ':xlink:href'，因为它不是 ':svg:image' 的已知属性。("ttr.height]="node.height + 10" [attr.fill]="node.options.color" stroke="#000000"/> ]xlink:href="{{node.iconUrl}}" [ attr.x]="10" [attr.y]="(node.height / 2) - 5" height="20" wid"): ng:///AppModule/GraphComponent.html@27:17

我也试过去掉图像标签 ( xlink:href="node.iconUrl") 中的大括号，但变量名只是进入 html 而不是值。我将变量值显示为 svg 文本的一部分，并且工作正常，因此值设置正确。

有什么我可以更改以正确传递变量值的吗？

4

0 回答 0