From 59440419a7f45c3805fad5b28671cf98ab3d1e92 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 1 Feb 2022 23:26:47 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/offset-path/index.md | 217 ++++++++++++++++------------------ 1 file changed, 101 insertions(+), 116 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/offset-path/index.md b/files/ja/web/css/offset-path/index.md index c71d2ff8b7..e135a1d5ed 100644 --- a/files/ja/web/css/offset-path/index.md +++ b/files/ja/web/css/offset-path/index.md @@ -3,26 +3,26 @@ title: offset-path slug: Web/CSS/offset-path tags: - CSS - - CSS Motion Path - CSS モーションパス - - Experimental - - Motion Path - - Reference + - 実験的 + - モーションパス + - リファレンス - motion-path - offset-path - - 'recipe:css-property' - - モーションパス + - recipe:css-property +browser-compat: css.properties.offset-path translation_of: Web/CSS/offset-path --- -
{{cssref}}
+{{CSSRef}} -

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

+**`offset-path`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素がたどる移動経路と、親コンテナーまたは SVG 座標系の中での要素の配置を指定します。 -
{{EmbedInteractiveExample("pages/css/offset-path.html")}}
+{{EmbedInteractiveExample("pages/css/offset-path.html")}} -

構文

+## 構文 -
/* 既定値 */
+```css
+/* 既定値 */
 offset-path: none;
 
 /* 関数値 */
@@ -44,83 +44,72 @@ 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
-
モーションパスを全く定義しません。
-
- -

形式文法

+``` -{{csssyntax}} +### 値 -

解説

+- `ray()` + - : 最大 3 つの値を取り、ボックスの位置から始まり、指定された角度で定義された方向に進む線分であるパスを定義します。定義は角度で、 CSS のグラデーションの角度と同様に、 `0deg` を上にして正の角度を時計回り方向に増加させます。続く寸法の値は CSS の半径方向のグラデーションの寸法の値に似ており、 `closest-side` から `farthest-corner` まで、そしてキーワード `contain` です。 +- `url()` + - : SVG 図形の ID の参照です。 -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` -- のいずれかで、図形の形状をパスとして使用します。 +- `` -

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

+ - : [CSS シェイプ](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes)、たとえば `circle()`, `ellipse()`, `inset()`, `polygon()`, `path()` を指定します。 -

注: 仕様書の初期の版では、このプロパティを motion-path と呼んでいました。It was changed to offset-path because the property describe static positions, not motion.

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

例

+- `none` + - : モーションパスを全く定義しません。 -

以下の例は CodePen の例から抜粋しています。対応ブラウザーではライブ編集が可能です。

+## 解説 -

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

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

CSS

+仕様書の初期の版では、このプロパティを `motion-path` と呼んでいました。これが `offset-path` と変更されたのは、このプロパティが動きではなく静的な位置を記述するからです。 -
.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%;
-   }
-}
+{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 -

SVG

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

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

+CSS コードサンプルの `offset-path` プロパティは、 SVG の `` 要素と同じモーションパスを定義しています。このパスは、 SVG コードのレンダリングを見てもわかるように、煙突のある家の線画になっています。 -
<svg xmlns="http://www.w3.org/2000/svg"
+#### SVG
+
+ハサミの上半分と下半分は、 `offset-path` で定義されたモーションパスの始点に沿って配置されていなければ、キャンバスの左上に表示されます。
+
+```html
+
+  House and Scissors
+  
+  
+  
+  
+  
+  
-
-
ライブ結果

-
-
{{EmbedLiveSample('Examples', '100%', '450')}}

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('Motion Path Level 1', '#offset-path-property', 'offset-path')}}{{Spec2('Motion Path Level 1')}}初回定義

-
-
{{cssinfo}}

-
-
ブラウザーの互換性

-
-
{{Compat("css.properties.offset-path")}}

-
-
関連情報

-
-
    
- 
  • {{cssxref("offset")}}
    • 
- 
  • {{cssxref("offset-distance")}}
    • 
- 
  • {{cssxref("offset-rotation")}}
    • 
- 
  • SVG <path> 
    • 
-

-
-
その他のデモ:

-
-
+        fill-rule="evenodd" />
+
+```
+
+#### 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%;
+   }
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('Animating_an_element_with_offset-path', '100%', '450')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("offset")}}
+- {{cssxref("offset-distance")}}
+- {{cssxref("offset-rotate")}}
+- [SVG \](/ja/docs/Web/SVG/Tutorial/Paths)
+
+その他のデモ:
+
+- [Examples of the various values](https://codepen.io/team/css-tricks/pen/WZdKMq)
+- [Triangle](https://codepen.io/ericwilligers/pen/jrbJPp)
+- [Scissors](https://codepen.io/ericwilligers/pen/bwVkNa)
+- [Eyes](https://jsfiddle.net/ericwilligers/r1snqdan/)
-- 
cgit v1.2.3-54-g00ecf