Question

我正在尝试在我的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 < / p>

我也尝试过删除图像标签（xlink:href="node.iconUrl"）中的花括号，但是变量名只是通过html而不是值。我将变量值显示为svg文本的一部分，并且效果很好，因此可以正确设置该值。

是否可以更改某些内容以使变量值正确传递？

将typescript变量传递到svg image href属性

0 个答案: