座標系
SVG には、ウィンドウ座標系とユーザー座標系の 2 つの座標系があります。デフォルトでは、ユーザー座標系とビュー ウィンドウの座標系の点は 1 対 1 に対応しており、原点はビュー ウィンドウの左上隅にあり、X 軸は右側に水平に、Y 軸はビュー ウィンドウの左上隅にあります。 -軸は以下の図に示すように垂直下向きです:
SVG のウィンドウの位置は通常 CSS で指定され、サイズは SVG 要素の幅と高さの属性によって設定されます。ただし、SVG が埋め込みオブジェクト (オブジェクト要素など) に格納されている場合は、 SVG 要素)、SVG を含むドキュメントは CSS または XSL でフォーマットされており、これらの周囲のオブジェクトの CSS またはその他の指定されたサイズ値はすでにビューポートのサイズを計算できており、周囲のオブジェクトのサイズが使用されます。この時。
ここでは、ウィンドウ、ウィンドウ座標系、ユーザー座標系の概念を区別する必要があります。
ウィンドウ: Web ページ上の表示される長方形の領域を指します。この領域は通常、周囲のオブジェクトのサイズに関係します。
ビュー ウィンドウ座標系: これは基本的に、原点、X 軸、Y 軸を持つ座標系であり、2 方向に無限に広がります。デフォルトでは、原点はビューポートの左上隅にあり、X 軸は水平右方向、Y 軸は垂直下方向です。この座標系の点は変換できます。
ユーザー座標系 : 基本的に、原点、X 軸、Y 軸を持つ座標系であり、2 方向に無限に広がります。デフォルトでは、原点はビューポートの左上隅にあり、X 軸は水平右方向、Y 軸は垂直下方向です。この座標系の点は変換できます。
デフォルトでは、ウィンドウ座標系はユーザー座標系と一致しますが、ここで注意していただきたいのは、ウィンドウ座標系はウィンドウを作成する要素に属することです。ウィンドウ座標系が決定されると、その座標系が決定されます。ウィンドウ全体が決定されます。ただし、ユーザー座標系は各グラフィック要素に属しており、グラフィックスが座標変換される限り、この要素内のすべての座標と寸法はこの新しいユーザー座標系を使用します。
簡単に言うと、ウィンドウ座標系はウィンドウ内のすべての要素の初期座標プロファイルを記述し、ユーザー座標系は各要素の座標プロファイルを記述します。デフォルトでは、すべての要素は一致するデフォルトの座標系を使用します。ウィンドウ座標系。
座標空間の変換
キャンバスのユーザー座標の変換は、各変換、後続の描画の後に実行されます。グラフィックスは再度変換しない限り機能します。これが「現在の」ユーザー座標系の概念です。 Canvas にはユーザー座標系が 1 つだけあります。
SVG では状況がまったく異なります。 SVG 自体はベクター グラフィック要素であり、その 2 つの座標系は基本的に「ユーザー座標系」として数えられ、SVG の両方の座標空間 (ウィンドウ空間変換とユーザー空間変換) を変換できます。ウィンドウ空間の変換は、関連する要素の viewBox 属性によって制御されます (これらの要素は新しいウィンドウを作成します)。ユーザー空間の変換は、グラフィック要素の transform 属性によって制御されます。ビュー空間の変換は対応するビューポート全体に適用され、ユーザー空間の変換は現在の要素とそのサブ要素に適用されます。
ビュー ウィンドウの変換 - viewBox プロパティ
ウィンドウを作成できるすべての要素 (次のセクションを参照) に加えて、マーカー、パターン、およびビュー要素には、viewBox 属性があります。
viewBox 属性値の形式は (x0, y0, u_width, u_height) であり、各値はカンマまたはスペースで区切られ、ウィンドウに表示される領域 (ウィンドウの左上隅の座標) を決定します。は (x0, y0 ) に設定され、ウィンドウの幅は u_width に設定され、高さは u_height に設定されます。この変換はウィンドウ全体に影響します。
ここで混同しないでください。ウィンドウのサイズと位置は、ウィンドウを作成する要素とその周囲の要素によって決まります (たとえば、最も外側の svg 要素によって作成されるウィンドウは CSS によって決まります) 、幅と高さ)、ここで viewBox は、ビュー ウィンドウ座標系のどの部分をこの決定された領域に表示できるかを実際に設定します。
viewBox の設定には、実際にはビュー ウィンドウ スペースのスケーリングと変換という 2 つの変換が含まれます。
変換の計算も非常に簡単です。例として、最も外側の svg 要素のビュー ウィンドウを取り上げます。svg の幅と長さが width、height に設定され、viewBox が (x0) に設定されていると仮定します。 、y0、u_width、u_height)。描画されるグラフィックスの幅と高さのスケーリング比は、それぞれ、width/u_width、height/u_height となります。ウィンドウの左上隅の座標は (x0,y0) に設定されます。
次のコードによって描画される結果の違いを体験してください:
日常の作業で、しばしば完了する必要があるタスクの 1 つは、親コンテナに適合するようにグラフィックスのグループを拡大縮小することです。 viewBox 属性を設定することで、この目標を達成できます。
新しいウィンドウを作成する要素
ウィンドウはいつでもネストできます。新しいウィンドウが作成されると、新しいウィンドウ座標系とユーザー座標系も作成されます。当然、クリッピング パスも作成されます。以下は、新しいウィンドウを作成できる要素のリストです:
svg: svg はネストをサポートします。
symbol: use 要素によってインスタンス化されるときに新しいウィンドウを作成します。
image: svg 要素を参照すると、新しいウィンドウが作成されます。
foreignObject: 内部のオブジェクトをレンダリングするための新しいウィンドウを作成します。
ズーム率を保持する - prepareAspectRatio 属性
場合によっては、特に viewBox を使用する場合、両方向に押すのではなく、グラフィックスがビュー ウィンドウ全体を占めることを期待します。スケーリング。場合によっては、グラフィックスを両方向に固定比率で拡大縮小したいことがあります。これは、preserveAspectRatio 属性を使用して制御できます。
この属性は、新しいウィンドウを作成できるすべての要素に加え、イメージ、マーカー、パターン、ビュー要素で使用できます。また、preserveAspectRatio 属性は、viewBox が要素に設定された後にのみ有効になります。 viewBox が設定されていない場合、preserveAspectRatio 属性は無視されます。
属性の構文は次のとおりです: preserveAspectRatio="[defer]
defer: オプションのパラメーター。画像要素にのみ有効です。画像要素のpreserveAspectRatio属性の値が「defer」で始まる場合、画像要素は参照されているものの拡大縮小率を使用することを意味します。画像 (参照されている場合) 画像にスケーリングがない場合、「defer」は無視されます。他のすべての要素はこの文字列を無視します。
align: このパラメータは、統一スケーリングの位置合わせを決定し、次の値をとります:
なし - グラフィックスがビューポート全体を完全に埋めることができるように、統一スケーリングを強制しません。
xMinYMin - 均一なスケーリングを強制し、viewBox に設定された
xMidYMin - 均一なスケーリングを強制し、vivowBox の X 方向の中点をビューポート内の X 方向の中点に揃えます。つまり、X 方向の中点が揃えられ、Y 方向が同じになります。上記のように。
xMaxYMin - 均一なスケーリングを強制し、viewBox に設定された
他のタイプの値と同様: xMinYMid、xMidYMid、xMaxYMid、xMinYMax、xMidYMax、xMaxYMax。これらの組み合わせの意味は上記と同様です。
meetOrSlice: オプションのパラメータ。次の値を設定できます:
meets - デフォルト値。すべてのグラフィックスがビューポートに表示されるように、グラフィックスを均一にスケールします。
スライス - グラフィックスがビューポートを満たすようにグラフィックスを均一にスケールし、余分な部分はクリップされます。
次の図は、さまざまな詰め物の効果を示しています:
ユーザー座標系の変換 - 変換属性
このタイプの変換は、要素の変換属性を設定することで指定されます。ここで注意すべき点は、transform属性で設定された要素の変形はその要素とそのサブ要素にのみ影響し、他の要素とは関係がなく、他の要素にも影響を与えないことです。
平行移動 - 平行移動
平行移動変換では、関連する座標値を指定された位置に平行移動します。この変換では、両方の軸の平行移動量を渡す必要があります。例を見てください:
回転 - 回転
要素の回転も、回転変換を使用して実装することができます。これには、 の角度パラメーターを渡す必要があります。回転。例を見てください:
skew - skew
transform は、X 軸に沿った傾斜変換もサポートしています (左右に傾斜、正の角度は右に傾斜します)。実際に y 軸を傾けます)、または y 軸に沿って傾けます (上下に傾けます。正の角度は下向きの傾きを意味し、実際に x 軸を傾けます)。この変換では、角度を決定する角度パラメーターを渡す必要があります。傾く。以下の例を見てください:
スケール - スケール
スケーリング オブジェクトは、2 つのパラメーターを受け取り、2 番目の場合は水平方向と垂直方向のスケーリング比をそれぞれ指定するスケーリング変換によって完成します。パラメータが省略された場合は、最初のパラメータと同じ値が取られます。以下の例を見てください:
変換変換 [1 0 1 0 tx ty]:
変換チェーン
変換属性は複数の変換の設定をサポートしており、これらの変換はスペースで区切って属性内にまとめて配置するだけです。実行効果は、これらの変換を順番に個別に実行した場合と同じです。
単位のない値は、現在のユーザー座標系の単位値である「ユーザー単位」を持つとみなされます。
ユニット付き
svg の関連単位は CSS と同じです: em、ex、px、pt、pc、cm、mm、in。長さには「%」も使用できます。
相対測定単位: em と ex は CSS と同じで、現在のフォントのフォント サイズと x 高さを基準にしています。
絶対測定単位: 1 ピクセルは 1 つの「ユーザー単位」に相当します。つまり、「5px」と「5」は同じです。ただし、px がピクセルに対応するかどうかは、何らかの変換が実行されたかどうかによって決まります。
他の単位は基本的に px の倍数です: 1pt=1.25px、1pc=15px、1mm=3.543307px、1cm=35.43307px、1in=90px。
最も外側の SVG 要素の幅と高さが単位 (つまり、「ユーザー単位」) を指定していない場合、これらの値は px 単位とみなされます。
この記事は少しわかりにくいですが、「グラフィック要素の座標と長さは、ウィンドウ座標系の変換と、ユーザー座標系の変換。"以上です。
実用的なリファレンス:
スクリプト インデックス: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開発センター: https://developer.mozilla.org/en/SVG
人気のリファレンス: http://www.chinasvg.com/
公式ドキュメント: http://www.w3.org/TR/SVG11/
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
