SVG/SVGPan：ロード時のセンターグラフィック

Question

私は、ブラウザフレーム内にSVGグラフィックを配置するために、入れ子になった<svg/>と<g/>要素を使用していました。外側のsvg要素の幅と高さは100％で、内側のxとyは50％に設定されていました。内側のg要素は、画像の半分のサイズの負のオフセットを持ちます。これは正常に動作していましたが、現在はパンとズームの機能を追加したいと考えています。

入れ子にされたSVGアプローチは、混乱するSVGPanと互換性がないようです。

SVGPanは、左上の図から始める場合にのみ機能します。 SVGPanと互換性のある方法でトップレベルのgを中心に変形を追加するためにSCGがロード/ロードされるときに実行されるスクリプトを書く必要があると思います。

<g />をマトリックス変換で初期化するにはどうすればよいですか？

((viewport.width - g.width)/2, (viewport.width - g.width)/2) 

SVGの作成時にビューポートのサイズはわかりませんが、そこにスクリプトをドロップしてトランスフォームまたはトランスレーションを作成できます。スクリプトはどこで生きていて、何をすべきですか？それはSVGPanと互換性がある必要があります。任意のHTML要素でSVG要素を埋めるために

Answer 1

タロスは、私が今

<svg><g><svg></svg></g></svg> 

を使用していますし、それが[jquery-で動作するように中心にグラフィックを可能にhttps://github.com/talos/jquery-svgpan/issues/3

代わりの

<svg><svg><g></g></svg></svg> 

を参照してください、私のためにこの問題を解決しました] svgpan。

Answer 2

：（適切な場合、またはposition:absoluteまたはposition:fixed）

1. はラッピングHTML要素にposition:relativeを置きます。
2. position:absoluteをSVG要素に置きます（必要に応じてtop:0; left:0; width:100%; height:100%）。

このSVG要素は、常にHTML要素を埋めます。この要素を必要に応じて配置/サイズ/中央に配置します。あなたのSVGコンテンツは、SVGビューポートのコンテンツの中央部を中心とするためにあなたのSVGにviewBoxを設定

1. 内に中心を取得するために

   。
   たとえば、コンテンツが半径30の円で、中心が175,300の場合、viewBox="145 270 60 60"と設定します。

2. SVG要素のpreserveAspectRatio属性を省略するか、またはxMidYMidを使用するようにして、ビューボックスの中心が常にSVGビューポートの中央になるようにします。それに応じてviewBoxを調整し、または他の要素を変換

   をパンして、SVGコンテンツをドラッグし

。