2

CSS トランジション (Chrome、FF) を使用できるようにするために、いくつかの SVG 属性スタイルを CSS スタイルに変換し始めました。ただし、Chrome で問題が発生しました。window-zoom が 100% でな​​い場合、translate の動作が異なるようです。

<svg style="position:absolute">
    <rect width="20" height="20" fill="blue"
    transform="translate(50,50)"></rect>
</svg>
<svg style="position:absolute">
    <rect width="20" height="20" fill="red"
    style="-webkit-transform:translate(50px,50px)"></rect>
</svg>

http://jsfiddle.net/mP493/

ここに画像の説明を入力

赤い三角形は青い三角形の上にあるはずですが、拡大するとそうではありません。SVG 属性スタイルを CSS スタイルに変換する計画を放棄しなければなりませんか?

4

1 に答える 1

0

SMILアニメーションで行っているようです。これらは SVG プレゼンテーション属性の遷移を可能にし、現在 FF と Chrome で適切なサポートを提供しています。

主な欠点は、アニメーションが完了していない場合に、アニメーションを現在の位置から元に戻すのが簡単ではないことです。

于 2013-09-19T16:18:45.423 に答える