From 34180e44f3d21f60abe400ab728baedbe171281c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 May 2021 14:20:47 +0900 Subject: Web/SVG/Tutorial/Positions を更新 (#849) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/03/23 時点の英語版に同期 - 原語併記、英語版章題、訳注マクロを削除 --- .../svg/tutorial/positions/canvas_default_grid.png | Bin 0 -> 1242 bytes files/ja/web/svg/tutorial/positions/index.html | 63 ++++++++++++++------- 2 files changed, 43 insertions(+), 20 deletions(-) create mode 100644 files/ja/web/svg/tutorial/positions/canvas_default_grid.png (limited to 'files') diff --git a/files/ja/web/svg/tutorial/positions/canvas_default_grid.png b/files/ja/web/svg/tutorial/positions/canvas_default_grid.png new file mode 100644 index 0000000000..ff125e99c4 Binary files /dev/null and b/files/ja/web/svg/tutorial/positions/canvas_default_grid.png differ diff --git a/files/ja/web/svg/tutorial/positions/index.html b/files/ja/web/svg/tutorial/positions/index.html index ade0c5a9c1..0a4b87a820 100644 --- a/files/ja/web/svg/tutorial/positions/index.html +++ b/files/ja/web/svg/tutorial/positions/index.html @@ -1,33 +1,56 @@ --- -title: Positions +title: 配置 slug: Web/SVG/Tutorial/Positions tags: + - Beginner + - Coordinate systems + - Coordinates + - Drawing + - Graphics + - NeedsBeginnerUpdate - SVG - - 'SVG:Tutorial' + - SVG:Tutorial translation_of: Web/SVG/Tutorial/Positions --- -

{{ PreviousNext("SVG/Tutorial/Getting_Started", "SVG/Tutorial/Basic_Shapes") }}

-

{{ 英語版章題("The grid") }}

-

グリッド

-

すべての要素向けに、SVG は canvas (あるいはその他多くのコンピュータによる描画ルーチン) で使われているものと似た座標システムまたはグリッドシステムを用います。これは、ドキュメントの左上隅を点 (0, 0) として考えます。よって位置は、左上隅から右方向へ伸びる正の X 軸と下方向へ伸びる正の Y 軸により、ピクセル数で測定されます。この座標は、子供の頃に教わったグラフのものとは逆向きであることに注意してください。しかし、これは HTML の要素を配置する場合と同じです。

-

例:

-

以下の要素は、左上隅から右および下へ 100px の範囲を占める長方形を表します。

+

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

+ +

この記事では、 Scalable Vector Graphics (SVG) がどのようにオブジェクトの位置や大きさを表現しているのか、座標系や、スケーラブルなコンテキストにおける「ピクセル」の測定値の意味などを紹介します。

+ +

グリッド

+ +

SVG はすべての要素に対して座標系またはグリッドシステムを使用しており、これは canvas (またはその他多くのコンピュータ描画ルーチン) で使用されているものと同様です。すなわち、文書の左上隅を点 (0,0)、すなわち原点と見なします。位置は、左上からのピクセル単位で測定され、正の x 方向は右に、正の y 方向は下になります。これは、子どもの頃に教わったグラフの描き方 (Y 軸が反転している) とは少し違うことに注意してください。しかし、これは HTML の要素の配置方法と同じです (既定では、左書きの文書では同様に考えられまていますが、右書きの文書は X を右から左に配置します)。

+ +

例:

+ +

次の要素、

+ 
<rect x="0" y="0" width="100" height="100" />
-

{{ 英語版章題("What are .22pixels.22.3F") }}

-

"ピクセル" とは

-

ほとんどの基本的なケースにおいて、SVG ドキュメントの 1 ピクセルは出力デバイス (例えばスクリーン) の 1 ピクセルに対応します。 しかしこの動作を変えることができないのであれば、SVG の名称内に "Scalable" はなかったでしょう。CSS のフォントサイズで絶対値と相対値があるように、SVG でも絶対単位 ("pt" や "cm" など寸法の識別子) と、単位が欠落して数値だけのいわゆる{{ 原語併記("ユーザー単位", "user units") }}があります。

-

特に明示しなければ、1 ユーザー単位は 1 スクリーン単位と同じです。明示的にこの動作を変えるための手段が SVG にあります。以下の svg ルート要素から始める場合:

+ +

は、左上の角を起点に、そこから右と下に 100px の範囲で四角形を定義します。 +

+ +

「ピクセル」とは

+ +

最も基本的な場合においては、 SVG 文書の 1 ピクセルは出力デバイス (例えば画面) の 1 画素に対応します。しかし、この動作を変えることができないのであれば、 SVG の名称に "Scalable" が付いていなかったでしょう。 CSS のフォントサイズに絶対値と相対値があるように、 SVG でも絶対単位 ("pt" や "cm" など寸法の識別子) と、そのような識別子を持たない数値だけの、いわゆるユーザー単位があります。

+ +

特に指定しない限り、 1 ユーザー単位は 1 画面単位と同じです。明示的にこの動作を変えるための手段が SVG にあります。以下の svg ルート要素から始める場合:

+ 
<svg width="100" height="100">
-

上記の要素は、100x100px のシンプルな SVG キャンバスを定義します。1 ユーザー単位は 1 スクリーン単位と同じです。

+ +

上記の要素は、 100x100px のシンプルな SVG キャンバスを定義します。1 ユーザー単位は 1 画面単位と同じです。

+ 
<svg width="200" height="200" viewBox="0 0 100 100">
-

この場合、SVG キャンバス全体のサイズは縦横ともに 200px です。しかし viewBox 属性が、表示するキャンバスの部分を定義しています。これら 200x200 ピクセルの領域は、ユーザー単位 (0, 0) から始まり右方向および下方向に 100x100 ユーザー単位を占める領域を表示します。これは実質的に 100x100 単位の領域をズームインし、画像を 2 倍のサイズに引き伸ばします。

-

現行の (単一の要素またはイメージ全体への) ユーザー単位とスクリーン単位間のマッピングは、{{ 原語併記("ユーザー座標系", "user coordinate system") }} と呼ばれます。座標系から離れることで、回転・変形・反転を行うこともできます。デフォルトのユーザー座標系は、1 ユーザーピクセルを 1 デバイスピクセルに割り当てます。(ただし、デバイスは何を 1 ピクセルとして扱うかを決めることができるかもしれません。) SVG ファイルで "in" や "cm"など 特定の寸法である長さは、結果の画像で 1:1 で見えるようにする方法で計算されます。

-

これを説明する SVG 1.1 の仕様を引用します:

-

[...] suppose that the user agent can determine from its environment that "1px" corresponds to "0.2822222mm" (i.e., 90dpi). Then, for all processing of SVG content: [...] "1cm" equals "35.43307px" (and therefore 35.43307 user units)

{{ 訳注("以下は参考訳文") }}(前略) ユーザーエージェントは自身の環境から、"1px" を "0.2822222mm" に対応づける (すなわち 90dpi) と仮定します。すると、SVG コンテンツの処理において (中略) "1cm" は "35.43307px" (よって、35.43307 ユーザー単位) と一致します。

+ +

この場合、 SVG キャンバス全体の大きさは 200px×200px です。しかし viewBox 属性は、表示するキャンバスの部分を定義しています。これら 200x200 ピクセルの領域は、ユーザー単位 (0,0) から始まり右方向および下方向に 100x100 ユーザー単位を占める領域を表示します。これは実質的に 100x100 単位の領域をズームインし、画像を 2 倍のサイズに引き伸ばします。

+ +

現行の (単一の要素またはイメージ全体への) ユーザー単位と画面単位間のマッピングは、ユーザー座標系 (user coordinate system) と呼ばれます。座標系から離れることで、回転・変形・反転を行うこともできます。既定のユーザー座標系は、1 ユーザーピクセルを 1 デバイスピクセルに割り当てます。(ただし、デバイスは何を 1 ピクセルとして扱うかを決めることができるかもしれません。) SVG ファイルで "in" や "cm"など 特定の寸法である長さは、結果の画像で 1:1 で見えるようにする方法で計算されます。

+ +

これを説明する SVG 1.1 の仕様を引用します。

+ +

(前略) ユーザーエージェントは自身の環境から、"1px" を "0.2822222mm" に対応づける (すなわち 90dpi) と仮定します。すると、SVG コンテンツの処理において (中略) "1cm" は "35.43307px" (よって、35.43307 ユーザー単位) と一致します。

-

{{ PreviousNext("SVG/Tutorial/Getting_Started", "SVG/Tutorial/Basic_Shapes") }}

-

Interwiki Languages Links

-

{{ languages( { "en": "en/SVG/Tutorial/Positions", "fr": "fr/SVG/Tutoriel/Positionnement"} ) }}

+ +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

-- cgit v1.2.3-54-g00ecf