DOMからSVG座標に翻訳し、再び戻る方法-CSSチュートリアル-php.cn

How to Translate from DOM to SVG Coordinates and Back Again

キーポイント

SVGには、viewBox属性に基づいて定義された独自の座標系があり、任意のサイズにスケーリングできます。これにより、特にレスポンシブデザインでは、カーソルの位置に従ってSVG要素を追加することが複雑になります。
SVGはDOMの一部になり、他の要素と同様に操作できます。これにより、座標系間の変換を完全に回避できます。
domからSVG座標への変換は、getBoundingClientRect()メソッドで位置とサイズを抽出することで実現できます。ただし、SVGからDOM座標への変換はより困難であり、SVG独自のマトリックス分解メカニズムを使用する必要があります。
SVGまたは個々の要素は、翻訳、スケーリング、回転、および/または傾斜によって変換され、最終的なSVG座標に影響します。すべての変換を考慮して、.getScreenCTM()メソッドを任意の要素とSVG自体に適用できます。

svgsは、

属性に独自の座標系を定義します。たとえば、viewBox

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

ログイン後にコピー

これにより、0,0から800単位の幅と600単位の高さが設定されます。これらのユニットは、描画に使用される任意の測定単位であり、ユニットの小数部分を使用できます。このSVGを800 x 600ピクセルの領域に配置する場合、各SVGユニット

は1つの画面ピクセルに直接マッピングする必要があります。ただし、特にレスポンシブデザインでは、ベクトル画像を任意のサイズにスケーリングできます。 SVGは400 x 300にスケーリングでき、10 x 1000スペースで変形を伸ばすことさえできます。カーソルの位置に従ってそれらを配置したい場合、このSVGにより多くの要素を追加することがより困難になります。注：SVG座標の詳細については、Sara SoueidanのViewport、Viewbox、およびPreserveaspectratioの記事を参照してください。

調整変換を避けます

座標系間の変換を完全に回避できる場合があります。 （画像やCSSの背景ではなく）HTMLページに埋め込まれた

SVGはDOMの一部になり、他の要素と同様に操作できます。たとえば、単一の円を含む基本的なSVG：

CSS効果を適用できます：

イベントハンドラーを添付してプロパティを変更することもできます。

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

ログイン後にコピー

次の例では、SVG画像に30のランダム円を追加し、CSSにホバー効果を適用し、円をクリックするときにJavaScriptを使用して半径を10ユニット増加させます。

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}

ログイン後にコピー

codepen

const mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', (e) => {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
});

ログイン後にコピー

の例をご覧ください

SVGからDOM調整変換

SVG要素上でDOM要素をオーバーレイする必要がある場合があります。たとえば、世界地図に表示されるアクティブな国にメニューまたは情報ボックスを表示します。 SVGがHTMLに埋め込まれていると仮定すると、要素はDOMの一部になるため、位置とサイズをメソッドを使用して抽出できます。（上記の例のコンソールを開き、半径が増加した後に円をクリックする新しいプロパティを表示します。）

Element.getBoundingClientRect()はすべてのブラウザでサポートされており、次のピクセルサイズの属性を持つdomrectオブジェクトを返します。

および.x：viewportの原点と比較して、要素の左側にx座標.left
：ビューポートの原点と比較して、要素の右側にx座標.right
および.y：ビューポートの起源に対する要素の上部のy座標.top
：ビューポートの起源に対する要素の底部のy座標.bottom
：要素の幅（IE8以下ではサポートされていませんが、.widthマイナス.rightと同じ）< .left
マイナス.heightと同じです）.bottom .top

〜

およびwindow.scrollX〜.leftを追加することで計算できます。 window.scrollY .top domからSVG調整変換

これはもっと挑戦的です。クリックイベントが発生したビューボックスに新しいSVG要素を配置するとします。イベントハンドラーオブジェクトは、dom

および

ピクセル座標を提供しますが、SVGユニットに変換する必要があります。 .clientX .clientY乗算係数を適用して、SVGポイントの座標を計算できると思うかもしれません。たとえば、1000単位幅のSVGが幅500ピクセルの容器に配置されている場合、任意のDom X座標を2で掛けてSVG位置を取得できます。

これはうまくいきません！ …

SVGは、コンテナに最適であることは保証されていません。

要素サイズが変更された場合（おそらくユーザーに応じてブラウザを変更する場合）、幅と高さの要因を再計算する必要があります。
SVGまたは1つ以上の要素は、2Dまたは3Dスペースで変換できます。
これらの障害を克服したとしても、予想通りに機能することはなく、しばしばエラーがあります。

メソッドを使用してSVGにポイントを作成し、画面/イベントxとyの座標を次のように渡すことです。

createSVGPoint()メソッドの逆マトリックスから作成されたマトリックス変換を適用できます。これは、SVGユニットをマップして座標をスクリーニングします。

SVGPには

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

ログイン後にコピー

SVGPには

および.getScreenCTM()プロパティがあり、SVG Viewboxの座標を提供します。

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

ログイン後にコピー

次のコードは、SVGキャンバスをクリックしたポイントに円を配置します。

.x注：.yメソッドは、XMLネームスペースURIを指定することを除いて、標準dom

メソッドと同じです。つまり、HTMLではなくSVGドキュメントで動作します。

変換するために変換svg座標

もう1つのより複雑な側面があります。 SVGまたは単一の要素は、翻訳、スケーリング、回転、および/または傾斜によって変換できます。これは、最終的なSVG座標に影響します。たとえば、次の<g>レイヤーは標準SVGユニットの4倍大きいため、座標はSVGを含む座標の4分の1になります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

ログイン後にコピー

生成された長方形

は、のように見えます。 幸いなことに、メソッドは任意の要素に適用できます。生成されたマトリックスはすべての変換を考慮しているため、単純な

変換関数を作成できます：.getScreenCTM() svgPoint()

次のデモンストレーションは、すべての最新のブラウザで機能します

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

ログイン後にコピー

（JavaScriptをES5に変換する場合、IE11でも機能します！）

。 SVGをクリック/クリックすると、カーソルポイントに円が追加されます。 これは、変換された領域をクリックするときにも発生しますが、正しい座標が計算されるようにSVG自体の代わりに要素を

関数に渡すときにも起こります。

<g>codepen svgPoint()

の例をご覧ください

理想的には、SVG座標変換を避けることを避けることが最善ですが、これが不可能な場合は、上記の方法を使用して、プロセスがすべてのページサイズで堅牢であることを確認してください。

DOM座標とSVG座標の違いは何ですか？

ドキュメントオブジェクトモデル（DOM）とスケーラブルベクトルグラフィックス（SVG）はどちらもWeb開発のコンポーネントですが、さまざまな用途があります。 DOMは、HTMLおよびXMLドキュメントのプログラミングインターフェイスです。ドキュメントの構造を表し、その内容と視覚的表現を操作する方法を提供します。一方、SVGは、2次元グラフィックス用のXMLベースのベクトル画像形式です。 2つの主な違いは、座標系です。 DOMはピクセルベースの座標系を使用しますが、SVGはスケーリングおよび変換できる

属性に基づいてシステムを使用します。

DOM座標をSVG座標に変換する方法は？

DOM座標をSVG座標に変換するには、SVG要素のviewBoxメソッドを使用してSVG座標系にポイントを作成することが含まれます。その後、

メソッドを使用して、ポイントをSVG座標系に変換できます。この方法では、SVG要素の変換マトリックスを表すDommatrixオブジェクトを取得します。

SVG座標をDOM座標に変換する方法は？

SVG座標をDOM座標に変換するには、SVGMATRIXオブジェクトのcreateSVGPointメソッドを使用できます。このメソッドは、元のマトリックスの逆マトリックスである新しいSVGMATRIXオブジェクトを返します。 SVGポイントにこの逆マトリックスを掛けることにより、それをDOM座標系に戻すことができます。 matrixTransform

SVGにおけるViewBox属性の役割は何ですか？

svgの

の属性は、SVG画像のアスペクト比と座標系を指定するために使用されます。これにより、SVG要素のスケーリングと位置を制御できます。 inverse属性は、min-x、min-y、幅、および高さの4つの値を取ります。これらの値は、SVG座標系の長方形を定義します。

私のプロジェクトでDOMをSVGパッケージに使用する方法は？

dom to SVGパッケージは、DOM座標をSVG座標に変換して逆変換に変換するための便利なツールです。プロジェクトで使用するには、NPM（JavaScriptプログラミング言語のパッケージマネージャー）を使用してインストールする必要があります。インストールしたら、JavaScriptファイルに導入し、そのメソッドを使用して変換を実行できます。

SVGのCX属性は何ですか？

svgの

cx属性は、円の中心のx座標を指定するために使用されます。これは、SVG円を作成するための基本的なプロパティの1つです。 cx属性の値は、ユーザー座標系の長さです。

WebページでDOMとSVGの両方を使用できますか？

はい、WebページでDOMとSVGの両方を使用できます。 SVGはHTMLに組み込まれているため、DOMの一部です。 DOMメソッドとプロパティを使用して、SVG要素を操作できます。これにより、Webページに動的でインタラクティブなグラフィックを作成できます。

SVGの座標系は、HTMLの座標系とどのように違いますか？

SVGの座標系は、HTMLの座標系とは異なります。 HTMLでは、座標系はピクセルベースで、原点はページの左上隅にあります。 SVGでは、座標系はviewBox属性によって定義され、原点はviewBoxの左上隅にあります。これにより、SVGグラフィックスはスケーラブルで解像度とは独立しています。

transform transform DOM座標とSVG座標の間で変換するための一般的なユースケースは何ですか？