Transitioning svg text opacity

Question

有沒有人對過渡SVG文本元素的不透明度有任何問題？我使用填充不透明風格和筆畫不透明風格來淡入淡出文本元素。它在大多數瀏覽器上都能正常工作，但在Mac上的Chrome中完全不會轉換 - 文本只是一次全部彈出。

除了填充不透明度和筆畫不透明度之外，我嘗試設置「不透明度」屬性，並且似乎確實能夠工作，儘管現在我在轉換運行之前和之後看到了奇怪的閃爍效果。這就像它設置爲不透明= 1秒之前它將其設置爲0，然後轉換爲1.

另一個有趣的事情是，其他形狀（圓形，矩形）淡入淡出幾乎相同代碼到我正在使用文本。

這對某個特定的瀏覽器來說似乎很古怪，但我想知道其他人對文本元素不透明度的體驗。是否有技巧使其表現一貫？

Answer 1

您使用的是哪個版本的Chrome？我在前一段時間在Chrome開發中發現了一個bug，當時它在word cloud上工作，但它似乎已經從19.0.1077.3 dev開始修復。也許修復還沒有成爲你的特定版本呢？

在我的情況下，使用opacity暫時解決了這個問題。閃爍效應可能是由於指數符號不被解析爲非常小的數字;你可以嘗試使用1e-6而不是0來解決這個問題。

Answer 2

對於我幾個月前製作的動畫，我使用webkit-transition，與visibility: hidden組合使用webkit-transition。這似乎運作良好。如果這不起作用，您可以嘗試過渡到接近零的不透明度。