0

SVG テキスト要素の不透明度の移行で問題が発生したことはありますか? fill-opacity スタイルと stroke-opacity スタイルの両方を使用して、テキスト要素をフェードインおよびフェードアウトします。ほとんどのブラウザでは問題なく動作しますが、Mac の Chrome ではまったく遷移しません。テキストが一度に飛び出したり飛び出したりするだけです。

fill-opacity と stroke-opacity に加えて「opacity」属性を設定してみましたが、動作しているように見えますが、トランジションが実行される直前と直後に奇妙なちらつき効果が見られます。0 に設定してから 1 に移行する前に、一瞬 opacity=1 に設定しているようです。

もう 1 つの興味深い点は、他の図形 (円、四角形) が、私がテキストで使用しているものとほぼ同じコードで問題なくフェードインおよびフェードアウトすることです。

これは特定のブラウザでは奇妙に思えますが、テキスト要素の不透明度に関する他の人々の経験について疑問に思っています. 一貫して動作させるためのトリックはありますか?

4

2 に答える 2

6

使用しているChromeのバージョンは何ですか？ワードクラウドで作業しているときにChromedevのバグに気づきましたが、19.0.1077.3devで修正されたようです。おそらく、修正はまだ特定のバージョンに組み込まれていませんか？

私の場合、を使用opacityすると一時的に問題が修正されました。ちらつきの影響は、指数表記が非常に少数の場合に解析されないことが原因である可能性があります。1e-6これを回避する代わりにを使用してみることができます0。

于 2012-04-13T14:46:23.477 に答える
0

数か月前に作成したアニメーションでは、スタイルを切り替えて とwebkit-transitionを組み合わせて使用​​しましたvisibility: hidden。これはうまくいくようです。それでもうまくいかない場合は、不透明度をゼロに近づけてみてください。

于 2012-04-13T08:36:55.607 に答える