角度绑定到 svg 文本元素获取未知属性错误

Question

我正在尝试将值绑定到 SVG/文本元素的 dx 属性。如果没有绑定，它看起来像：

<svg width="100%" height="130px" viewBox="0 0 150 150" *ngIf="!filled">
  <circle attr.stroke='{{backColor}}' stroke-width="5" fill='transparent' r="50" cx="50%" cy="35%" />
  <text x="50%" y="32%" dx="8" alignment-baseline="middle" text-anchor="middle" font-size="33" attr.fill="{{color}}">{{value}}
  </text>
  <text x="50%" y="45%" alignment-baseline="middle" text-anchor="middle" font-size="12" attr.fill="{{color}}">{{label}}
  </text>
</svg>

我尝试了各种绑定可能性，例如：

<text x="50%" y="32%" dx="{{dxnum}}" >

和

<text x="50%" y="32%" [dx]="dxnum" >

但这总是给出一个错误，说 dx 不是 SVG 文本的可识别属性：

无法绑定到dx，因为它不是:svg:text'. ("lor}}' stroke-width="5" fill='transparent' r="50" cx="50%" cy="35%" /> <text x="50%" y="32%" [ERROR ->]dx="{{dxnum}}" alignment-baseline="middle" 的已知属性

Answer 1

由于svg 元素上没有对应的属性绑定，所以使用attribute 绑定而不是property 绑定。请参阅Attribute binding 文档

[attr.dx]="dxnum"