Angular directives not render in SVG

我正在做一些Angular和SVG的實驗。Angular directives not render in SVG

我創建了一個簡單的指令，我試圖渲染<text>來自模板的元素。

起初，它根本沒有工作，但我發現這個有趣的鏈接：Including SVG template in Angularjs directive和我包括這個svgService。它對我測試過的所有東西都很好，除了一件事。它缺少<text>標籤的內容。

我試圖修改指令中compile函數的代碼，但沒有成功。我不是DOM的專家。

這是plunker。

該代碼不輸出錯誤。我不得不添加一些測試來查看rawElement是否未定義。我的問題似乎是在childNode（即代表<text>的含量比其他節點作用不同，這是爲什麼我怎樣才能修復功能感謝

編輯：？？文字呈現在Chromium而在Firefox 。有沒有辦法讓它在Firefox中工作？

來源

2014-12-13 Paco

你應該使用的textContent，而非的innerText複製的文本數據，即

// set the text from the template 
    if(rawElement.localName === 'text'){ 
     replacement.textContent = rawElement.textContent; 
    }

Firefox不支持非標準innerText屬性，只有符合標準的textContent。

來源

2014-12-15 16:04:08

這個工程！非常感謝。 – Paco 2014-12-15 16:18:10

明天我會獎勵賞金。（今天不能這樣做） – Paco 2014-12-15 16:18:39

對我來說，它看起來像你的代碼它工作得很好。我發現這個問題是AAAA的x和y的值不在視圖內-able區。我改變了代碼，這樣看。

<text 
    fill="#000000" 
    x="0" 
    y="5"> 
    AAAA 
</text>

它映入眼簾。一對夫婦次需要考慮的是可視區域的大小以及可視區域內元素的位置。我希望這能夠幫到你。

來源

2014-12-13 22:51:01

我按照你的建議改變了文本的座標，但是我仍然無法看到文字AAA，現在我要在Chrome中嘗試（它在Firefox中不起作用）。編輯：能夠看到所有的文字在鉻。但在Firefox中，它只顯示「文本」（不是指令的一部分）和「SVG Below」（不是SVG的一部分）。 – Paco 2014-12-14 12:31:22

Angular directives not render in SVG

回答

相關問題