Angular bind to svg text element getting unknown property error

Question

I'm trying to bind a value to an SVG/Text element's dx property. Without binding it would look like:

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

I've tried various binding possibilities like:

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

and

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

But this always gives an error saying that dx is not a recognized attribute of SVG text:

Can't bind to dx since it isn't a known property of :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

Since there are no corresponding property binding on svg element, use attribute binding instead of property binding. See Attribute binding docs

[attr.dx]="dxnum"