Angular2 Svg爲文本屬性綁定

我有幾個要添加的屬性像X，Y，文字錨，字體大小，字體家庭和填充，但隻字體大小適合我。填充不希望與[]一起使用。

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%"> 
    <svg:text 
      [attr.x]="0" 
      [attr.y]="100" 
      [attr.text-anchor]="start" 
      [attr.font-size]="29" 
      [attr.font-family]="Helvetica" 
      attr.fill="#77777"> 
       <tspan 
        x="0" 
        dy="0">Random Text</tspan> 
    </svg:text> 
</svg>

Plunker：http://plnkr.co/edit/D0eyyW9flV92rmoh8o85

如何我可以綁定到上面列出的屬性？

來源

2016-04-24 fjozsef

具有string格式的硬編碼值，否則角度將查看該組件的名稱以更新綁定。你也應該指定fill屬性值爲#777而不是#777777。在IE瀏覽器上運行應用程序時，需要使用#777777。

<svg:text 
     [attr.x]="0" 
     [attr.y]="100" 
     [attr.text-anchor]="start" 
     [attr.font-size]="29" 
     [attr.font-family]="'Helvetica'" 
     [attr.fill]="'#777'"> 
      <tspan 
       x="0" 
       dy="0">Random Text</tspan> 
</svg:text>

記住每個屬性中[]標誌結合，你錯過了同爲attr.fill

Demo Here

來源

2016-04-24 20:11:37

我不得不使用'[attr.text錨] = 「 '開始'」'爲文本錨，但它似乎解決了我的問題。有一件不起作用的是x座標。我將它改爲50，但結果是一樣的。任何想法？ – fjozsef

我可以看到變化正在發生，通過改變..看看這裏http://plnkr.co/edit/FpqOQUUllMrs0ANtCBGu?p=preview –

我已經改變了文本的x屬性，而不是tspan的。他們不應該都工作嗎？ – fjozsef

Angular2 Svg爲文本屬性綁定

回答

相關問題