CSS - offset-path
概要
| 属性名 | offset-path |
|---|---|
| 値 | none | <offset-path> || <coord-box> |
| 値の詳細 |
<offset-path> = ray(...) | <url> | <basic-shape> <coord-box> = content-box | padding-box | border-box | fill-box | stroke-box | view-box |
| 初期値 | none |
| 適用可能要素 | トランスフォーム可能要素 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/?search=offset-path |
説明
モーションパス のパスを指定します。
- none
- モーションパスを指定しません。
- ray(...)
ray(...)を参照してください。- <url>
<path>や<polygon>などでシェイプを定義したSVGファイルを指定します。- <basic-shape>
circle()やpath()などの描画関数を指定します。詳細は clip-path を参照してください。- <coord-box>
- 描画領域を指定します。詳細は
mask-originを参照してください。
使用例
使用例は CSSモーションパス を参照してください。
ray(...)
ray(<angle> && <ray-size>? && contain? && [at <position>]? ) <ray-size> = closest-side | closest-corner | farthest-side | farthest-corner | sides
<position> を起点として <angle> の方向(上方向を0度として時計まわり)に向かう、長さ <ray-size> の放射線をパスとします。contain を指定するとオブジェクトが領域からはみ出さない範囲で移動します。
- closest-side
- 最も近い枠線との距離。
- closest-corner
- 最も近いコーナーとの距離。
- farthest-side
- 最も遠い枠線との距離。
- farthest-corner
- 最も遠いコーナーとの距離。
- sides
- 最初に枠線と交わるまでの距離。
使用例は モーションパス: ray() を参照してください。
関連項目
リンク
- https://drafts.fxtf.org/motion/#offset-path-property
- https://developer.mozilla.org/ja/docs/Web/CSS/offset-path
- https://caniuse.com/?search=offset-path
Copyright (C) 2025 杜甫々
初版:2025年3月9日、最終更新:2025年3月9日
https://www.tohoho-web.com/css/prop/offset-path.htm