スケーラブルなベクターグラフィックスの回転機能
画像を回転すると、その画像が表示される角度が変更されます。 シンプルなグラフィックスでは、これは単純な画像や退屈な画像に多少の変化や興味を加えることができます。 すべての変換と同様に、rotateはアニメーションの一部として、または静的なグラフィックスとして機能します。 SVGやスケーラブルベクターグラフィックスで回転を使用する方法を学ぶことで、シェイプのデザインとは異なる角度を要求することができます。 SVG回転機能は画像をどちらの方向にも回転させます。
回転について
回転機能は、グラフィックのすべての角度です。 SVGイメージをデザインするときは、従来の角度で座るスタティックモデルを作成します。 例えば、正方形は、X軸に沿って2つの辺を有し、Y軸に沿って2つの辺を有する。 回転すると、同じ四角形を取ってダイヤモンドの形にすることができます。
その1つの効果だけで、非常に典型的なボックス（ウェブサイトでは一般的なスーパー）からダイヤモンドになりました。これはまったく共通ではなく、デザインに興味深いビジュアルを追加していません。 回転は、SVGのアニメーション容量の一部です。 円は、表示されている間は常に回転できます。 この動きは訪問者の注意を引くことができ、デザイン内の主要エリアや要素に自分の経験を集中させるのに役立ちます。
Rotateは、イメージ上の1つの点が固定されたままであるという理論に基づいて動作します。 段ボールにプッシュピンで取り付けられた紙片を想像してみてください。 ピンの位置は固定された場所です。 エッジをつかんで時計回りまたは反時計回りに回転させると、プッシュピンは決して移動しますが、四角形はまだ角度を変えます。用紙は回転しますが、ピンの固定点は変わりません。 これは、回転機能の仕組みと非常によく似ています。
回転構文
回転すると、回転の角度と固定領域の座標が表示されます。
transform = "rotate（45,100,100）"回転角度が最初に追加されます。 このコードでは、回転角は45度です。 中心点は次に追加する点です。 ここでは、中心点は座標100,100にあります。中心位置座標を入力しない場合、デフォルトは0,0になります。 下の例では、角度は依然として45度ですが、中心点が設定されていないため、デフォルトは0,0になります。
transform = "rotate（45）"デフォルトでは、角度はグラフの右側に向いています。 反対方向にシェイプを回転させるには、マイナス記号を使用して負の値をリストします。
transform = "回転（-45）"角度は360度の円に基づいているため、45度の回転は1/4回転です。 革命を360として挙げると、文字通り完全な円で反転されているのでイメージは変わらないので、最終結果は見た目と同じです。