角度绑定到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：文本'。 （“lor}}'stroke-width =”5“fill ='transparent'r =”50“cx =”50％“cy =”35％“/> ] dx =”{{dxnum}}“基准=“中间”

Answer 1

既然有svg元素没有相应属性的绑定，使用attribute结合，而不是property结合。见Attribute binding文档

[attr.dx]="dxnum"