CSS offset-anchor 属性

定義と使用方法

offset-anchor 属性は、 offset-path 定義されたパス上のポイントを指定します。

属性を使用して、 offset-rotate 属性が要素を回転する場合、 offset-anchor 属性で定義されたポイントも回転中心となります。

<img>要素の右中心を定義されたパス上に固定します：

img {
  offset-path: path('M 50 80 C 150 -20 250 180 350 80');
  offset-anchor: right center;
}

offset-anchor: auto|value|initial|inherit;

値	説明
auto	デフォルト値。アンカーは要素の中心に位置し、属性値 50% 50% に等しいです。
left top left center left bottom right top right center right bottom center top center center center bottom	キーワードを1つ指定した場合、もう1つの値は "center" になります。
xpos ypos	最初の値は水平位置、2番目の値は垂直位置です。左上角は 0 0。単位はピクセル（0px 0px）または他のCSS単位になります。値を1つ指定した場合、もう1つの値は50%になります。百分率と位置を組み合わせて使用できます。
x% y%	最初の値は水平位置、2番目の値は垂直位置です。左上角は 0% 0%。右下角は 100% 100%。値を1つ指定した場合、もう1つの値は50%になります。デフォルト値は：50% 50%。
initial	この属性をデフォルト値に設定します。参照してください initial。
inherit	親要素からこの属性を継承します。参照してください inherit。

デフォルト値：	auto
継承性：	いいえ
アニメーション作成：	サポートしています。参照してください：アニメーション関連属性。
バージョン：	CSS3
JavaScript 表記法：	object.style.offsetAnchor="bottom right"

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome	Edge	Firefox	Safari	Opera
116	116	72	16	102