offset-path
===========

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`offset-path`** は CSS のプロパティで、要素がたどる移動経路と、親コンテナーまたは SVG 座標系の中での要素の配置を指定します。

試してみましょう
--------

構文
--


```css
/\* 既定値 \*/
offset-path: none;

/\* 関数値 \*/
offset-path: ray(45deg closest-side contain);

/\* URL \*/
offset-path: url(#path);

/\* 図形 \*/
offset-path: circle(50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200");

/\* 位置ボックス \*/
offset-path: margin-box;
offset-path: stroke-box;

/\* グローバル値 \*/
offset-path: inherit;
offset-path: initial;
offset-path: revert;
offset-path: unset;
```

### 値

`ray()`

最大 3 つの値を取り、ボックスの位置から始まり、指定された角度で定義された方向に進む線分であるパスを定義します。定義は角度で、 CSS のグラデーションの角度と同様に、 `0deg` を上にして正の角度を時計回り方向に増加させます。続く寸法の値は CSS の半径方向のグラデーションの寸法の値に似ており、 `closest-side` から `farthest-corner` まで、そしてキーワード `contain` です。

`url()`

SVG 図形の ID の参照です。 — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` — のいずれかで、図形の形状をパスとして使用します。

`<basic-shape>`

CSS シェイプ、たとえば `circle()`, `ellipse()`, `inset()`, `polygon()`, `path()` を指定します。

* `path()`
* : SVG 座標の構文で定義されたパス文字列です。

`none`

モーションパスを全く定義しません。

解説
--

このプロパティは、移動する要素がたどることができる経路を定義します。オフセットの経路は 1 つまたは複数のサブ経路で指定された経路か、スタイル付けされていない基本図形の形状で指定します。オフセット経路上の要素の正確な位置は、 `offset-distance` プロパティで決定されます。それぞれの図形または経路は、初期位置を `offset-distance` の `0` の計算値で定義し、オブジェクトの回転方向を指定する初期方向を初期位置にします。

仕様書の初期の版では、このプロパティを `motion-path` と呼んでいました。これが `offset-path` と変更されたのは、このプロパティが動きではなく静的な位置を記述するからです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

offset-path =   
  none                          |  
  <offset-path> || <coord-box>    
  
<offset-path> =   
  <ray()>        |  
  <url>          |  
  <basic-shape>    
  
<coord-box> =   
  <paint-box>  |  
  view-box       
  
<ray()> =   
  ray( <angle>          &&  
  <ray-size>?           &&  
  contain?              &&  
  [ at <position> ]? )    
  
<url> =   
  <url()>  |  
  <src()>    
  
<paint-box> =   
  <visual-box>  |  
  fill-box      |  
  stroke-box      
  
<ray-size> =   
  closest-side     |  
  closest-corner   |  
  farthest-side    |  
  farthest-corner  |  
  sides              
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### offset-path を指定した要素のアニメーション

CSS コードサンプルの `offset-path` プロパティは、 SVG の `<path>` 要素と同じモーションパスを定義しています。このパスは、 SVG コードのレンダリングを見てもわかるように、煙突のある家の線画になっています。

#### SVG

ハサミの上半分と下半分は、 `offset-path` で定義されたモーションパスの始点に沿って配置されていなければ、キャンバスの左上に表示されます。


```html
<svg
 xmlns="http://www.w3.org/2000/svg"
 width="700"
 height="450"
 viewBox="350 0 1400 900">
  <title>House and Scissors</title>
  <rect x="595" y="423" width="610" height="377" fill="blue" />
  <polygon points="506,423 900,190 1294,423" fill="yellow" />
  <polygon points="993,245 993,190 1086,190 1086,300" fill="red" />
  <path
 id="house"
 d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
 fill="none"
 stroke="black"
 stroke-width="13"
 stroke-linejoin="round"
 stroke-linecap="round" />
  <path
 id="firstScissorHalf"
 class="scissorHalf"
 d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
 transform="translate(0,0)"
 fill="green"
 stroke="black"
 stroke-width="5"
 stroke-linejoin="round"
 stroke-linecap="round"
 fill-rule="evenodd" />
  <path
 id="secondScissorHalf"
 class="scissorHalf"
 d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
 transform="translate(0,0)"
 fill="forestgreen"
 stroke="black"
 stroke-width="5"
 stroke-linejoin="round"
 stroke-linecap="round"
 fill-rule="evenodd" />
</svg>
```


#### CSS


```css
.scissorHalf {
  offset-path: path(
    "M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
  );
  animation: followpath 4s linear infinite;
}

@keyframes followpath {
  to {
    motion-offset: 100%;
    offset-distance: 100%;
  }
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Motion Path Module Level 1 # offset-path-property |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `offset`
* `offset-distance`
* `offset-rotate`
* SVG <path>

その他のデモ:

* Examples of the various values
* Triangle
* Scissors
* Eyes