問題タブ [svgpanzoom]

これはariutta/svg-pan-zoomのライブラリ固有の質問です。

<a>いくつかのタグを持つ SVG 要素があります。jQuery を介して、これらの要素のクリックを処理します: $('svg').on('click', 'a', function() { ... }).

ここで、SVG 要素のズームとパンのために上記のライブラリを追加しました。カーソルが要素上にあるときにパンするたびaにクリックリスナーを起動することを除いて、それはうまく機能します。

マウスアップがパンの結果であるときにリスナーが起動しないようにするにはどうすればよいですか?

ariutta svg-pan-zoom ライブラリ ( https://github.com/ariutta/svg-pan-zoom ) を使用しています。

ユーザーがボタンをクリックすると、(x:1000, y:20) の特定の形状にパンしようとしています。また、この時点で画像を中央に配置したいと思います。

私が直面している問題は、パンしようとしているポイントと中央が画面から外れることです。

私は現在使用しています：

しかし、これは機能しません。

詳細については、jsFiddle を参照してください: http://jsfiddle.net/arjSharma/n6r55dp1/2/

誰でも私の問題を解決できますか?

ありがとう

Ariutta の svg-pan-zoom を svg.js で使用しています。Arriuta のネイティブ ダブルクリック機能を無効にして、最終的にパン調整とアニメーションで構成される独自の機能を追加してみました。

通常はこれで問題なく動作しますが、ページをロードすると、ダブルクリック機能がおかしくなることがあります。私のデバッグによると、私のアプリが読み込まれると、私が書いたダブルクリック関数がダブルクリックごとに2回呼び出されることがあるようです。これにより、アニメーションの動作がおかしくなり、この問題がいつ発生するかについての一貫した根拠がないようです。サーバーの再起動が機能する場合と機能しない場合があります。問題が解決するまで、ページをリロードし続ける必要があります。

私の最初の考えは、私のファイルの読み込み順序に何か問題があり、時々、順不同で読み込まれることがあるということです。これについては現在調査中です。私の他の考えは、おそらくこれは svg.js アニメーション ライブラリと関係があるか、または arriuta のプラグインでネイティブのダブルクリック機能を置き換えようとしているということでした。考え？

正しく動作すると、svg 画像は中央に配置されてから拡大します。正しく動作しないと、中央に配置され、縮小して何もない状態になります。

Panzoom.js プラグインを使用して要素をパンおよびズームしています。カーソルに適用されたマスクがあり、カーソルが画像の上に置かれた場所で、下にある画像の一部が表示されます (カラー画像の上に白黒画像があると想像してください。カーソルは、カラー画像の一部を表示します。カーソルが画像の上に置かれます)。Chrome と Safari (Panzoom を使用) で画像を拡大すると、マウス座標が適切に指定されるため、マスクがカーソルと適切に整列します。ただし、Firefox および IE では、カーソルの座標を拡大する際に正しくないため、ホバー マスクがカーソルと正しく整列しません。明らかな何かが欠けていますか？ご検討いただきありがとうございます。以下はコードです。

angularJS ページに SVG を表示するために、svg-pan-zoom ( https://github.com/ariutta/svg-pan-zoom/ ) を使用しています。

いくつかのイベントに応じて、表示される SVG を変更したいので、いくつかの要素をクリックした後、changeSVG(fileName)関数を呼び出しています。

SVG は変更されて表示されますが、ズームとパン機能が失われます。

同じ要素をもう一度クリックすると、ズームとパン機能が元に戻ります。最後に、表示される SVG を変更し、ズーム/パン機能を維持するには、1 回ではなく 2 回クリックする必要があります。関数を 1 回のクリックではなく 2 回呼び出しても、問題は解決しません。

私のchangeSVG関数：

編集：テストのためにこれを試しましたが、2回クリックした後でも、パンズームをまったくロードしません：

編集2：

ここのプランカーで見ることができます：http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview 適切に機能させるには、埋め込みにする必要があります（全幅の問題だと思います）。マウスを左側に移動してメニューを生成すると、要素を 2 回クリックしてパン/ズームを再度有効にする必要があることがわかります。