キーポイント

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

svgsは、

屬性に獨(dú)自の座標(biāo)系を定義します。たとえば、viewBox

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

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

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

調(diào)整変換を避けます

座標(biāo)系間の変換を完全に回避できる場合があります。 （畫像や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調(diào)整変換

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

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

• および.x：viewportの原點(diǎn)と比較して、要素の左側(cè)にx座標(biāo).left
• ：ビューポートの原點(diǎn)と比較して、要素の右側(cè)にx座標(biāo).right
• および.y：ビューポートの起源に対する要素の上部のy座標(biāo).top
• ：ビューポートの起源に対する要素の底部のy座標(biāo).bottom
• ：要素の幅（IE8以下ではサポートされていませんが、.widthマイナス.rightと同じ）< .left
：要素の高さ（IE8以下ではサポートされていませんが、
• マイナス.heightと同じです）.bottom .top
すべての座標(biāo)はブラウザビューポートに関連しているため、ページがスクロールするにつれて変更されます。ページ上の絶対位置は、

?

およびwindow.scrollX?.leftを追加することで計(jì)算できます。 window.scrollY .top domからSVG調(diào)整変換

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

および

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

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

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

• 要素サイズが変更された場合（おそらくユーザーに応じてブラウザを変更する場合）、幅と高さの要因を再計(jì)算する必要があります。
• SVGまたは1つ以上の要素は、2Dまたは3Dスペースで変換できます。
• これらの障害を克服したとしても、予想通りに機(jī)能することはなく、しばしばエラーがあります。
幸いなことに、SVGは、座標(biāo)を変換するための獨(dú)自のマトリックス分解メカニズムを提供します。最初のステップは、

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

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

SVGPには

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

SVGPには

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

<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を指定することを除いて、標(biāo)準(zhǔn)dom

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

変換するために変換svg座標(biāo)

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

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

生成された長方形

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

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

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

<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でも機(jī)能します?。?p>。 SVGをクリック/クリックすると、カーソルポイントに円が追加されます。 これは、変換された領(lǐng)域をクリックするときにも発生しますが、正しい座標(biāo)が計(jì)算されるようにSVG自體の代わりに要素を

関數(shù)に渡すときにも起こります。

<g>codepen svgPoint()

の例をご覧ください

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

DOM座標(biāo)とSVG座標(biāo)の違いは何ですか？

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

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

DOM座標(biāo)をSVG座標(biāo)に変換する方法は？

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

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

SVG座標(biāo)をDOM座標(biāo)に変換する方法は？

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

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

svgの

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

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

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

SVGのCX屬性は何ですか？

svgの

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

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

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

SVGの座標(biāo)系は、HTMLの座標(biāo)系とどのように違いますか？

SVGの座標(biāo)系は、HTMLの座標(biāo)系とは異なります。 HTMLでは、座標(biāo)系はピクセルベースで、原點(diǎn)はページの左上隅にあります。 SVGでは、座標(biāo)系はviewBox屬性によって定義され、原點(diǎn)はviewBoxの左上隅にあります。これにより、SVGグラフィックスはスケーラブルで解像度とは獨(dú)立しています。

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

多くの場合、DOM座標(biāo)とSVG座標(biāo)を変換することは非常に便利です。たとえば、インタラクティブなSVGグラフを作成している場合、マウス座標(biāo)（DOM座標(biāo)系にある）をSVG座標(biāo)に変換して、SVG要素を操作する必要があります。代わりに、カスタムSVG要素を作成する場合は、その座標(biāo)をDOM座標(biāo)系に戻してページに正しく配置する必要がある場合があります。

以上がDOMからSVG座標(biāo)に翻訳し、再び戻る方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。