CSS offset-distance 属性

定義と使用方法

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 アニメーション

参照:CSS offset 属性

参照:CSS offset-anchor 属性

参照:CSS offset-path 属性

参照:CSS offset-position 属性

参照:CSS offset-rotate 属性