問題タブ [svgpanzoom]

AngularJS と svg-pan-zoom を使用して、次のように を使用して外部 svg を表示<object>します。

問題は、次のような関数を使用して svg を変更したときです。

スコープ変数のみが更新されます。datahtml のも更新するには、リンクを 2 回クリックする必要があります<object>。

changeSVG(fileName)関数は次のとおりです。

私のコントローラーから：

そして私のコントローラーで：

コンソールを使用していくつかの値を確認しています。実際、関数を呼び出すとスコープ変数が更新されdataますが、html の属性はもう一度<object>クリックするまで更新されません。何が起こっているのですか？HTML を 2 回ではなく 1 回のクリックで更新したい。

これは実際の例です。左側のメニューをクリックして SVG を変更し、動作を確認してください: http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview (これは IE では動作しない可能性があります)

私はjavascript svg-pan-zoom.js ( https://github.com/ariutta/svg-pan-zoom )ライブラリを使用して、Webアプリケーションでsvgをズームおよびパンしています。Firefox でのズームは非常に遅くラグがあり、Chrome と IE11 でのズームは非常にうまく機能します (フロア プランを示す 5 MB の .svg ファイルでテスト - ファイルが小さい場合、この問題はそれほど目立ちません)。パンニングはうまく機能しています。フォーラムでこの問題に関する多くのトピックを読みましたが、まだ解決策が見つかりません。この問題の原因と修正方法を知っている人はいますか?

Example: http://jsfiddle.net/coz3fd0L/3/

htmlスニペットをブラウザに動的に送信しています。このスニペットには、SVGJavascript の一部が含まれています。

スニペットの関数は正常に実行されますが、が完全に読み込まれるsvgPanZoom前に実行されているため、 は失敗します( )。一方、 を導入して数秒待ってからクリックすると、すべて正常に動作します。SVGTypeError: e.getSVGDocument(...) is nullalert()

明らかにこれは素晴らしい解決策ではないので、すべてがロードされた後に動的にロードされたスクリプトを実行するにはどうすればよいですか? $(window).load(function(){...});?に相当するもの

svgpanzoom jsを使用してパス/テキストの正確な位置を変更せずに、svgキャンバス上の一部のパス/テキストを除くすべてのものをズームしたい。私のニーズの実際の作業は、いくつかのマーカーが付いた地図のようなものです。新しいピンやマーカーも動的に配置したい...

上に示したのは、次のような svg の例です。SVG 内のすべてのものをズームしようとしていますが、ズーム レベルを上げることなく、マーカーとテキスト自体を同じ場所に配置する必要があります。

私はsvgpanzoomを使用しています

私はコーディングの経験があまりなく、要素に埋め込まれた SVG をユーザーがある程度制御できるようにしようとしています。ariutta svgpanzoom.js ライブラリを見つけましたが、それで小さなテストを作成しようとすると、chrome でセキュリティ エラーが発生します (Firefox と Safari ではすべて正常に動作します)。

これが私の基本的なコードです

Chrome で発生するエラー: Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from a frame with origin "null". プロトコル、ドメイン、およびポートが一致する必要があります。

誰かが私が間違ったことを知っていますか?

前もって感謝します...

ariutta svg-pan-zoom ライブラリ ( https://github.com/ariutta/svg-pan-zoom ) を使用しています。(jquery.layout.jsペインとjquery-ui.jsでも使用)

svg-pan-zoom svg のパンやズームの値などの値を保存し、それらの値を使用して、異なるサイズのウィンドウを持つブラウザーを使用して同じ場所にジャンプしたいと考えています。

現在、値を保存するために getPan() と getZoom() を使用しています。次に、他のブラウザーでズーム (ズーム) とパン (パン) を実行して、同じ場所にズームおよびパンします。ブラウザ ウィンドウのサイズが異なる場合、これは機能しません。

この記事を見つけましたが、サイズが異なるウィンドウには対応していません:
特定の X 座標と Y 座標にパンし、画像を中央に配置する svg-pan-zoom

ariutta svg-pan-zoom ライブラリ ( https://github.com/ariutta/svg-pan-zoom ) を使用しています。ここで、デモ ファイル (ビュー ソース: http://ariutta.github.io/svg-pan-zoom/demo/thumbnailViewer.html )で説明されているような ThumbnailViewer を作成します。

タグを使用して svg.file を埋め込む代わりに、直接使用します。これが機能するデモ コードをどのように変更する必要がありますか?

私のコードは次のとおりです。

素晴らしい svg-pan-zoom プラグイン ( https://github.com/ariutta/svg-pan-zoom ) を使用して、svg 要素をパン/ズームしています。マウスのドラッグを有効にして移動できるようにしたいと考えています。

クリックイベントがあり、ユーザーがクリックするとsvg要素がドラッグされることがあるため、ドラッグを防止したいsvg内に単一の要素があります。要求された動作は、マウスがこの要素上にある場合を除き、標準としてドラッグすることです。私はすでに event.stopPropagation() と event.preventDefault() を試していますが、svg-pan-zoom プラグインには独自のイベント管理があるようです。

マウスのドラッグを防ぐにはどうすればよいですか?