SVGのtransform-origin：画像の中心を軸に回転する

CSSでSVG画像自身の中心を軸に回転するには、関連するパスを1つのグループにまとめ、そのグループにtransform-box: fill-boxとtransform-origin: centerを適用します。回転もそのグループに適用します。この2つのプロパティは、参照する矩形はどれか、その矩形内のどこに回転中心を置くか、という別の問題に対応します。

読み込んだアイコンがキャンバスを大きく横切って回転する場合は、パス座標を変える前に参照ボックスを調べます。部品が別々に回る場合は、変換を受ける要素を調べます。既存のベクター画像では、通常グループ化や変換の修正が必要です。トレースが役立つのは、まずラスターの元画像から編集可能なパスが必要な場合だけです。

centerだけでも画像が移動する理由

パスやグループなど、通常のSVGの子要素では、既定の変換原点は0 0です。ルートSVG要素の既定値は異なります。既定のtransform-box: view-boxでは、原点をcenterにすると、画像自身の境界ではなく、SVGの参照ビューポートを基準にします。MDNのSVG transform-originリファレンスは、既定値とこれらの例外を説明しています。

そのため、ロゴ周囲の余白が影響します。大きな描画領域の隅にある小さなシンボルの中心は、描画領域の中心とは異なります。transform-box: fill-boxは、参照を要素のオブジェクト境界ボックスへ切り替えます。SVGの切り抜きや余白の削除は行いません。transform-boxリファレンスでは、ストロークを含む参照が必要な場合のstroke-boxなど、利用できるボックスを定義しています。

2本のパスを1つのマークとして回転する

この完全な例をrotation.svgとして保存し、ブラウザーで開きます。独自の正方形と離れた三角形のアクセントを使い、両方を座標原点から離して配置しています。単独のファイルでも回転規則を持つよう、CSSはSVG内に置きます。

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

回転前の画像全体は、x = 80から220、y = 50から130に広がります。ボックスの幅は140単位、高さは80単位なので、中心は(150, 90)です。グループが回るときも、正方形とアクセントの関係は維持されます。

同じパスを固定角度の4つの状態でブラウザーに描画し、形状を読み取り、上の完全なSVGも別途開き直しました。比較には、既定原点の結果にも余裕がある広い表示領域を使っています。これらは手書きのデモ用パスであり、PerfectVectorの変換結果や、すべてのブラウザーとエディターのテストではありません。

既定原点の版では、マークが(0, 0)の周りを移動します。中心を指定した2つのグループ版は一致します。最後のパネルでは、正方形が(120, 90)、三角形のアクセントが(195, 90)を軸に回転します。各部品は自身の開始位置の近くに残りますが、マークは1つのオブジェクトとして回らなくなります。

自分のファイルでは、一緒に動かしたい部品だけを選びます。背景矩形、位置合わせのマーク、遠くの不要なパスは、グループの境界を大きくすることがあります。SVGの編集手順では、動作を加える前のファイル確認と整理を説明しています。

回転中心をデザインで決める場合は座標を明示する

SVGのtransform属性では、角度と回転中心を直接指定できます。この例では<g class="artwork">を<g transform="rotate(35 150 90)">へ置き換えます。2本のパスは中に残します。クラスを削除すると、CSSのtransformが属性を上書きすることもなくなります。

属性のrotate(angle cx cy)形式は、度数の後に現在のユーザー座標系の回転中心を指定します。CSSのrotate(35deg)は構文が異なり、原点を別のプロパティから取得します。同じ要素にCSSのtransformとSVGのtransform属性がある場合は、CSSが優先します。MDNのtransform属性リファレンスを参照してください。

明示的な座標は、蝶番、針、意図的にずらしたロゴの回転中心に役立ちます。回転するグループと同じローカル座標系で指定してください。画面で測った座標を、入れ子のSVGグループにそのまま貼り付けられるとは限りません。

既存グループに配置用の変換がある場合は、それを保持し、画像を含む新しい内側のグループに回転を設定します。その後、書き出したファイルをテストします。既存の変換を置き換えると、配置に使った移動や倍率が失われることがあります。倍率変更でもマークがずれる場合は、SVGの変換順序の例で移動と拡大縮小の組み合わせを確認できます。

中心を計算する前に境界を読む

この例のような単純なグループでは、中心は次のように計算します。

cx = x + width / 2
cy = y + height / 2

ブラウザーでグループを測定したgetBBox()の結果は、x: 80、y: 50、width: 140、height: 80でした。自身の回転は、このローカルボックスの値を変えませんでした。getBBoxドキュメントは、これらのユーザー空間の値と、ブラウザーのビューポートを基準にするgetBoundingClientRect()の矩形を区別しています。

選択枠や調整したviewBoxには、SVGの境界ボックスの手順で、座標系間の変換とストロークの余白の確認方法を説明しています。

回転したい要素を測定します。子の変換は、包含するグループの境界に影響する場合があります。子を別々に回転した今回のグループは、元の2つの形とは境界が異なりました。ラッパー、入れ子の倍率、不要な形状があるなら、上の単純な数値を再利用する前に確認してください。

ボックスの中心と見た目の中心は同じとは限らない

この例の正方形は、三角形のアクセントよりずっと大きな面積を占めます。それでも、両方を合わせたボックスの中点は、最も左と最も右の端の中間です。これは幾何学的な規則であり、回転中のデザインのバランスを判断するものではありません。

ボックスの中心から始め、複数の角度でマークを確認し、デザイン上必要なら明示的な回転中心に移ります。時計の針は通常、取り付け点が必要です。中心からずれたアクセントのあるロゴには、デザイナーが選んだ中心が必要かもしれません。その判断は、誤ってビューポート基準になった原点を直すこととは分けます。

回転には余裕も必要です。回転前の画像にぴったり合わせた書き出しは、回転後の角を切る場合があります。表示領域に十分な空間を残し、親のクリッピングも確認します。ファイル全体が誤った倍率で読み込まれるなら、個々の部品を変える前にSVGのサイズ診断を使います。

この手順は、輪郭を書き換えずに既存の形を回転します。ある輪郭を別の輪郭へ変えたい場合は、SVGのモーフィングガイドで、パス形状を対応させる別の問題を扱っています。

回転中心を設定する前に元データを準備する

アイコンがPNGやJPGしかなく、別々の形を編集したい場合は、PerfectVectorでSVGの候補を準備できます。画像をベクターへ変換し、輪郭と離れた細部を確認してから、一緒に回転する部品をグループ化します。グループを測る前に、不要な背景形状を確認します。

ビットマップはトレースしなくても全体を回転できます。編集可能な形状が作業に必要な場合にベクター化を使います。使えるベクターマスターがあれば保持してください。変換原点を変えても破損した輪郭は修復されず、ラスターのコピーをトレースすると不要な復元工程が加わります。

ファイルを渡す前に、実際のSVGを対象環境で開き直します。意図した部品が一緒に回り、回転中心が選んだ位置に保たれ、回転後の画像に余裕があることを確認します。後の編集用に、変更しないマスターを保持します。ブログのSVGワークフロー記事では、関連する準備と書き出しの確認を扱っています。

よくある質問

transform-origin: centerでSVGがキャンバスの周囲を回るのはなぜですか？ 既定のview-boxを参照するSVGの子要素では、centerはSVGの参照ビューポートを意味します。オブジェクトの境界ボックスを使いたい場合は、回転する要素のtransform-boxをfill-boxに設定します。

グループと各パスのどちらを回すべきですか？ 部品を1つのマークとして動かすなら、グループを回します。各パスにfill-boxとcenterを適用すると、部品ごとに別の回転中心が与えられ、全体の配置が変わります。

fill-boxの中心を使えば、非対称なロゴのバランスはよくなりますか？ 選ばれるのは、オブジェクトの境界ボックスの中心です。見た目のバランスには別の回転中心が必要な場合があるので、複数の角度でロゴを確認し、必要なら座標を明示します。

参考資料

1. MDN — SVG transform-origin — SVGの原点の既定値、ルート要素の例外、参照ボックスとの関係を定義しています。
2. MDN — transform-box — オブジェクト、ストローク、ビューポートの参照ボックスを定義しています。
3. MDN — SVG transform — 明示的な回転座標、グループ変換、CSSの優先を説明しています。
4. MDN — getBBox — ローカル形状の測定と、ビューポート矩形との違いを説明しています。

ラスター画像から編集可能な形状が必要なら、PerfectVectorでSVGを準備し、復元した部品を確認してからグループ化し、最終的に書き出したファイルで選んだ回転中心を確認してください。