CSS offset-distance 属性
- 前のページ offset-anchor
- 次のページ offset-path
定義と使用方法
offset-distance
この属性は、 offset-path
属性で定義されたパスの起点間の距離。
例
<img>要素は、定義されたパス上に配置され、パスの起点から33%の位置にあります。
img { offset-path: path('M 50 80 C 150 -20 250 180 350 80'); offset-distance: 33%; }
CSSの構文
offset-distance: auto|length|initial|inherit;
属性値
値 | 説明 |
---|---|
0 | 要素はパスの起点に配置されます。デフォルト値。 |
length |
固定の単位(px、pt、cmなど)を使用して、要素とパスの起点間の距離を指定します。 負の値は許可されていません。参照してください:CSS 単位。 |
% | パスの長さに対するパーセンテージで指定された距離 |
initial | この属性をデフォルト値に設定します。参照してください: initial。 |
inherit | この属性は親要素から継承されます。参照してください: inherit。 |
技術的詳細
デフォルト値: | 0 |
---|---|
継承性: | いいえ |
アニメーション制作: | サポートされています。参照してください:アニメーションに関連する属性。 |
バージョン: | CSS3 |
JavaScriptの構文: | object.style.offsetDistance="200px" |
ブラウザのサポート
テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
クローム | エッジ | ファイアフォックス | サファリ | オペラ |
---|---|---|---|---|
55 | 79 | 72 | 16 | 42 |
関連ページ
チュートリアル:SVG パス
チュートリアル:CSS アニメーション
- 前のページ offset-anchor
- 次のページ offset-path