svgテキストの不透明度を変更する

Question

SVGテキスト要素の不透明度を変更することに問題があったことはありますか？私はテキスト要素を消滅させるために、塗りつぶし不透明スタイルとストローク不透明スタイルの両方を使用しています。ほとんどのブラウザでうまく動作しますが、MacのChromeではまったく移行しません。テキストが一気にポップアウトされます。

塗りつぶし不透明度とストローク不透明度に加えて、「不透明度」属性を設定しようとしましたが、動作させるように見えますが、トランジション実行の直前と直後に奇妙なフリッカー効果が表示されます。 0に設定してから1に移行する前に、不透明度= 1に設定するようなものです。

もう1つ興味深いのは、他の図形（円、矩形）がほとんど同じ私がテキストで使っているものへのコード。

これは特定のブラウザでは奇妙なようですが、テキスト要素に対する不透明感に関する他の人々の経験については疑問に思っています。それが一貫して動作するようにするトリックはありますか？

Answer 1

使用しているChromeのバージョンは何ですか？私はword cloudで作業していたChrome Devのbugに気付きましたが、19.0.1077.3 devの時点で修正されているようです。おそらく、この修正プログラムはまだあなたの特定のバージョンになっていないでしょうか？

私の場合、opacityを使用すると一時的に問題を解決しました。フリッカー効果は、指数記法が非常に小さい数について解析されないことが原因である可能性があります。これを回避するには0の代わりに1e-6を試してみてください。

Answer 2

私は数ヶ月前に作ったアニメーションのために、スタイルを切り替え、visibility: hiddenと組み合わせてwebkit-transitionを使用しました。これはうまくいくようです。それでも問題が解決しない場合は、0に近い不透明度に移行してみてください。