Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。
その他 Newly available

transform-box

transform-box は transform の原点計算に使用される参照ボックスを指定します。content-box、border-box、fill-box、stroke-box、view-box の値があり、特にSVG要素の変形で重要です。SVGとHTMLの両方で一貫した変形動作を実現するために使用します。

変形基準参照ボックス

概要

transform-box は transform の原点計算に使用される参照ボックスを指定します。content-box、border-box、fill-box、stroke-box、view-box の値があり、特にSVG要素の変形で重要です。SVGとHTMLの両方で一貫した変形動作を実現するために使用します。

対応ブラウザ

デスクトップ

Chrome 118+
Edge 118+
Safari 13.1+
Firefox 125+

モバイル

Chrome Android 118+
Safari iOS 13.4+
Firefox Android 125+

基本構文

CSS 
.svg-element {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}

実務での使いどころ

  • SVG要素の正確な回転

    SVG要素を自身の中心を基準に回転させるため、transform-box: fill-box を設定して参照ボックスを要素自体に限定します。

注意点

  • デフォルト値がSVG要素では view-box、HTML要素では border-box であるため、混在環境での動作に注意が必要です。

アクセシビリティ

  • 変形は視覚的な表現のみに影響し、DOM構造やスクリーンリーダーの読み上げ順序には影響しません。

参考リンク