SVGのウィンドウ位置は一般にCSSで指定され、サイズはSVG要素の属性幅と高さによって設定されます。ただし、SVGが埋め込まれたオブジェクト（オブジェクト要素やその他のSVG要素など）に保存され、SVGを含むドキュメントがCSSまたはXSLでフォーマットされている場合、これらの周辺オブジェクトのCSSまたはその他の指定されたサイズ値は、ウィンドウサイズを既に計算でき、次に末梢オブジェクトのサイズを使用できます。
ここでは、ウィンドウ、ウィンドウ座標系、ユーザー座標システムの概念を区別する必要があります。
ウィンドウ：長さと幅が限られているWebページ上の可視長方形の領域を指し、この領域は一般に周辺オブジェクトのサイズに関連しています。ウィンドウ座標系：本質的に、原点、x軸、y軸を備えた座標系。そして、それは両方向に無限に伸びます。デフォルトでは、原点はウィンドウの左上隅にあり、x軸は右側に水平にあり、y軸は垂直方向に下向きにあります。この座標系のポイントを変換できます。ユーザー座標系：基本的には、原点、x軸、y軸を備えた座標系。そして、それは両方向に無限に伸びます。デフォルトでは、原点はウィンドウの左上隅にあり、x軸は右側に水平にあり、y軸は垂直方向に下向きにあります。この座標系のポイントを変換できます。デフォルトでは、ウィンドウ座標系とユーザー座標系が重複しますが、ウィンドウ座標系はウィンドウを作成する要素に属していることに注意する必要があります。ウィンドウ座標系が決定されると、ウィンドウ全体の座標トーンが決定されます。ただし、ユーザー座標システムは各グラフィック要素に属します。グラフィックに座標変換がある限り、新しいユーザー座標システムが作成されます。この要素のすべての座標と寸法は、この新しいユーザー座標系を使用します。
簡単に言うと、ウィンドウ座標系は、ウィンドウ内のすべての要素の初期座標プロファイルを記述し、ユーザー座標系は各要素の座標プロファイルを記述します。デフォルトでは、すべての要素がウィンドウ座標系と一致するデフォルトのユーザー座標システムを使用します。
スペース変換を調整します翻訳、スケーリング、および回転関数を通じて実装されるCanvasユーザー座標の変換を確認しましょう。各変換は、変換が再び実行されない限り、後で描かれた数値で機能します。これは、現在のユーザー座標系の概念です。 Canvasには、ユーザー座標系が1つしかありません。SVGでは、状況は完全に異なります。ベクトルグラフ要素として、SVG自体は本質的にユーザー座標系と見なすことができます。 SVGの両方の座標スペースを変換できます：ウィンドウスペース変換とユーザースペース変換。ウィンドウスペース変換は、関連する要素のプロパティビューボックスによって制御されます（これらの要素は新しいウィンドウを作成します）。ユーザースペース変換は、グラフ要素の変換属性によって制御されます。ウィンドウスペース変換は、対応するウィンドウ全体に適用され、ユーザースペース変換は現在の要素とその子要素に適用されます。
ウィンドウ変換 - ビューボックスプロパティウィンドウを作成できるすべての要素（次のセクションを参照）に加えて、マーカー、パターン、およびビュー要素には、ViewBox属性があります。
Viewbox属性値の形式は（x0、y0、u_width、u_height）であり、各値はコンマまたはスペースによって分離されます。それらは、窓によって表示される領域を共同で決定します。ウィンドウの左上隅の座標は（x0、y0）に設定され、ウィンドウの幅はu_widthに設定され、高さはu_heightです。この変換はウィンドウ全体で機能します。
ここで混乱しないでください：ウィンドウのサイズと位置は、ウィンドウと周辺要素を作成する要素によって決定されています（たとえば、最も外側のSVG要素によって作成されたウィンドウは、CSS、幅、高さによって決定されます）。ここのビューボックスは、実際にこの決定された領域を設定して、ウィンドウ座標系のどの部分を表示するかを設定します。ビューボックスの設定には、実際には、ズームとウィンドウスペースの翻訳の2つの変換が含まれています。変換の計算も非常に単純です。SVGの幅と長さが幅、高さ、およびビューボックスの設定が（x0、y0、u_width、u_height、u_height）に設定されていると仮定して、最も外側のSVG要素のビューウィンドウを例に挙げてください。次に、描画された図の幅と高さのスケールは、それぞれ幅/u_width、height/u_heightです。ウィンドウの左上隅の座標は（x0、y0）に設定されています。
次のコードで描かれた結果の違いを体験してください。
<SVG ViewBox = "0 0 200 200">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
上記の例で描かれた図では、緑と赤の長方形を見ることができます。この場合、ウィンドウ座標系のポイントは、ウィンドウ上のポイントにまだ対応しています。これもデフォルトです。
<svg Viewbox = "0 0 100 100">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
上記の例で描かれた図では、緑色の長方形のみを見ることができ、緑色の長方形は200*200ピクセルで画面に表示されます。この時点で、座標ポイントは一つだけでなく、数字が拡大されます。
<SVG ViewBox = "0 0 400 400">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
上記の例で描かれた図では、ウィンドウ座標系の単位が縮小されるため、両方の長方形が減少します。
毎日の仕事では、完了する必要がある1つのタスクは、グラフィックスのセットを拡大して親コンテナに適応することです。 Viewboxプロパティを設定することで、これを達成できます。
新しいウィンドウを作成できる要素いつでも窓をネストすることができます。新しいウィンドウを作成すると、新しいウィンドウ座標系とユーザー座標システムが作成され、もちろん、クリッピングパスを含む新しいものが作成されます。以下は、新しいウィンドウを作成できる要素のリストです。 SVG ：SVGはネストをサポートします。シンボル：使用要素によってインスタンス化されたら、新しいウィンドウを作成します。画像：SVG要素を参照するときに新しいウィンドウが作成されます。 foreignObject ：オブジェクトを内部にレンダリングする新しいウィンドウを作成します。スケール-PreServeaspectRatioプロパティをスケーリングしてください特にViewboxを使用する場合、グラフィックは両方向に同じ割合でスケーリングするのではなく、ウィンドウ全体を占めることがあります。時々、図の2つの方向が固定スケールで拡大されることを願っています。属性Preserveaspectratioを使用して、これを制御する目的を実現します。このプロパティは、新しいウィンドウに加えて、画像、マーカー、パターン、およびビュー要素を作成できるすべての要素です。さらに、PreserveaspectRatio属性は、ViewBoxが要素に設定された後にのみ機能します。 Viewboxが設定されていない場合、PreserveaspectRatioプロパティは無視されます。
属性の構文は次のとおりです。preserveaspectratio = [defer] <align> [<meetorslice>]
3つのパラメーターをスペースで分離する必要があることに注意してください。
延期：オプションのパラメーター、画像要素に対してのみ有効です。画像要素のpreserveaspectratio属性の値がdeferから始まる場合、画像要素が参照される画像のスケーリング比を使用することを意味します。参照された画像にスケーリング比がない場合、Deferは無視されます。他のすべての要素はこの文字列を無視します。 align ：このパラメーターは、統一されたスケーリングのアラインメントを決定し、次の値を取得できます。なし - グラフィックスがビューポート全体を完全に埋めることができるように、無効な統一スケーリング。
Xminymin-均一なスケーリングを強制し、ビューボックスに<min-x>および<min-y>セットをビューポートの最小xおよびy値に合わせます。
Xmidymin -ViveWboxのX方向のX方向の中間点をViewPortのX方向のX方向の中間点に強制します。要するに、x方向の中間点が整列し、y方向は上記と同じです。
Xmaxymin-力のスケーリングを強制し、<min -x> + <width> set in viewboxに並べて、ビューポートの最大x値に合わせます。
Xminymid、Xmidymid、Xmaxymid、Xminymax、Xmidymax、Xmaxymaxに似た他のタイプの値があります。これらの組み合わせの意味は、上記の状況に似ています。
MeetorSlice ：オプションのパラメーター、次の値を使用できます。対応の値を満たし、グラフィックスを均一にスケーリングして、すべてのグラフィックがビューポートに表示されるようにします。
スライス - グラフィックの統一されたスケーリングにより、グラフィックがビューポートを埋めることができ、過剰が切り取られます。
次の図は、さまざまな塗りつぶしの効果を説明しています。
ユーザー座標システムの変換 - 変換属性このタイプの変換は、要素の変換プロパティを設定することによって指定されます。ここで、変換属性によって設定された要素の変換は、要素とその子要素にのみ影響し、他の要素とは関係がなく、他の要素には影響しないことに注意する必要があります。翻訳 - 翻訳翻訳変換は、関連する座標値を指定された位置に変換し、変換は両方の軸上で翻訳される量に渡す必要があります。例を参照してください：<rect x = "0" y = "0" transform = "translate（30,40）" />
この例は長方形を描き、その出発点（0,0）を（30,40）に変換します。 （x、y）の座標値は直接設定できますが、翻訳変換を使用して実装することも非常に便利です。この変換の2番目のパラメーターは省略でき、デフォルトは0が処理されたときに処理されます。
回転 - 回転します要素の回転も非常に一般的なタスクです。回転変換を使用して実装できます。これには、回転角パラメーターを渡す必要があります。例を参照してください。<rect x = "20" y = "20" transform = "回転（45）" />
この例は、45度回転長方形を示しています。いくつかのメモ：
1.ここでの変換は、角度値をパラメーターとして受け取ります。
2。回転とは、x軸に対する回転を指します。
3。ユーザー座標系の起源（0,0）の周りに回転が拡張されます。
傾い - スキュー変換はまた、X軸に沿って傾けることができる傾斜変換（左と左角度と右角度が右に傾けられ、実際にはy軸に傾斜している）、またはy軸に沿って（上下にx軸に傾斜する下向きの角度に傾けます）。この変換には、角度パラメーターを渡す必要があり、傾斜角が決定されます。次の例を参照してください。<svg>
<rect x = "0" y = "0" fill = "green" />
<circle cx = "15" cy = "15" r = "15" fill = "red" />
<circle cx = "15" cy = "15" r = "15" fill = "yellow" transform = "skewx（45）" />
<rect x = "30" y = "30" />
<rect x = "30" y = "30" transform = "skewx（45）" />
<rect x = "30" y = "30" transform = "skewy（45）" />
</svg>
結果から、異なる傾向変換後に同じサイズの長方形の位置と形状を直接確認できます。ここでは、新しい座標系（30,30）がすでに異なる位置にあるため、長方形の開始位置が変更されたことに注意してください。
スケールスケールスケーリングオブジェクトは、2つのパラメーターを受け入れるスケーリング変換によって完了し、それぞれ水平および垂直のスケーリング比を指定します。 2番目のパラメーターが省略されている場合、最初のパラメーターと同じ値が実行されます。次の例を参照してください。<svg>
<text x = "20" y = "20" font-size = "20"> abc（scale）</text>
<text x = "50" y = "50" font-size = "20" transform = "スケール（1.5）"> abc（scale）</text>
</svg>
変換マトリックス - マトリックスグラフィックを学んだ人なら誰でも、すべての変換が実際に行列で表されることを知っているため、上記の変換は実際には3*3マトリックスで表現できます。エース
BDF
0 0 1
6つの値のみが使用されるため、[ABCDEF]として略されます。マトリックス（a、b、c、d、e、f）を割り当てて、対応する変換を実装するために変換します。変換は、座標と長さの両方を新しい次元に変換します。上記の変換の対応するマトリックスは次のとおりです。
翻訳変換[1 0 1 0 TX Ty]：
1 0 TX
0 1 Ty
0 0 1
スケーリング変換[SX 0 0 SY 0 0]：
SX 0 0
0 sy 0
0 0 1
回転変換[cos（a）sin（a）-sin（a）cos（a）0 0]：
cos（a）-sin（a）0
sin（a）cos（a）0
00 1
x軸に沿った傾向[1 0 tan（a）1 0 0]：
1タン（a）0
0 1 0
0 0 1
y軸に沿った傾向[1 tan（a）0 1 0 0]：
11 0
tan（a）1 0
00 1
エッセンスを変えます以前にキャンバスを要約したとき、あらゆる種類の変換がユーザー座標系に適用されることを知っていました。 SVGでは、すべての変換は2つの座標系（基本的にユーザー座標系）の場合もあります。コンテナオブジェクトまたはグラフオブジェクトに変換属性を指定した後、SVG、シンボル、マーカー、パターン、ビュー、SVGへのViewBox属性を指定した後、現在のユーザー座標システムに従って変換して、新しいユーザー座標システムを作成し、現在のオブジェクトとそのサブオブジェクトに作用します。このオブジェクトで指定されている座標と長さの単位は、周辺座標系に対応する1：1ではなくなりましたが、変形時に新しいユーザー座標系に変換されます。この新しいユーザー座標システムは、現在の要素とその子要素にのみ機能します。変換チェーン変換プロパティは、複数の変換の設定をサポートします。これらの変換は、中央のスペースによって分離され、プロパティに一緒に配置されます。実行効果は、これらの変換を独立して順番に実行することと同じです。<g transform = "翻訳（-10、-20）スケール（2）回転（45）翻訳（5,10）">
<！ - グラフィック要素はこちら - >
</g>
上記の効果は次のように同じです。
<g transform = "translate（-10、-20）">
<g transform = "スケール（2）">
<g Transform = "Rotate（45）">
<g transform = "translate（5,10）">
<！ - グラフィック要素はこちら - >
</g>
</g>
</g>
</g>
ユニット最後に、ユニットについて話しましょう。任意の座標と長さは、ユニットの有無にかかわらず装備できます。ユニットなしユニットのない値には、ユーザーユニットがあると見なされます。これは、現在のユーザー座標システムの単位値です。
ユニットを持ち込む状況SVGの関連ユニットは、CSSと同じです：EM、EX、PX、PT、PC、CM、MM、およびIN％も長さで使用できます。
測定の相対単位：EMとEXは、現在のフォントのフォントサイズとX-Heightに比べて、CSSにも似ています。
絶対測定単位：1つのpxはユーザーユニットに等しく、つまり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/