web-dev-qa-db-ja.com

snap.svgの変換プロパティを理解するにはどうすればよいですか?

私はsnap.svgを学習しようとしていますが、変換プロパティについていくつかの疑問があります。私の質問はかなり愚かですが、ここにあります

次のサンプルコードでは、数字は何を意味していますか?

     {"transform" : "t-10 0 s0 32 32"}
     {"transform" : "r180 32 32"}

Sはスケールを表していると思いますが、animAfterとafterの違いは何ですか?私はSVGに非常に慣れていません。

25
Bazinga777

変換形式は、一連の変換である文字列であるため、複数を連続して持つことができます。

編集:スナップでは最近、大文字と小文字が区別されないため、この部分では違いがありません(ただし、ラファエルが表示される場合があるので、注意する価値はあります) .jsコードと理解したい)、残りはまだ関連があるはずです...

T/t =平行移動(tは相対、Tは絶対)R/r =回転(rは相対、Rは絶対)S/s =スケール(sは相対、Sは絶対)

Snap.svgに十分な情報がない場合は、 Raphael変換のドキュメント を確認する価値があります。

場合によっては、Originの中心をオブジェクト自体、場合によっては0、0、特定のポイントの周りにしたい場合があるため、変換については、「Originの中心」を参照するものもあります。

t-10 0 s0 32 32は、x、y -10,0を変換してからx、y、cx、cyをスケーリングし、cx 32の周りの方法でxを0、32をスケーリングします。

r180 32 32は、ポイント32,32を中心に180度回転します。通常、値を区切るにはコンマまたはスペースを使用できます。

afterは、アニメーションの終了後に設定する「属性」値を表します。 animafterは、アニメーションの終了後に設定する「アニメーション」値を表します。

51
Ian

Snapは raphael と同じ構文を使用しているようです。 tは平行移動なので、xで-10単位平行移動します。 sはスケール、rは回転です。

4
Robert Longson