問題タブ [jquery-svg]

そこで、SVGを使用して描画ツールを作成したいと思います。パスのd属性を変更するために、かなり単純なアプローチを使用しています。

ご覧のとおり、これはmousemove関数で行います。コードは機能しますが、マウスが高速で移動していると応答しなくなり、実際に滑らかな線にしたいときに多数の直線が作成されます。これは、mousemoveイベントで実行している多数の文字列連結が原因で発生していると思います（クリックが長く、実際には数千文字も保持されていると、パスのd属性が非常に大きくなる可能性があります）。

d属性を直接操作する代わりに、パスの最後に新しい値を追加するネイティブな方法があるかどうか疑問に思っています。jquery-svgソースコードを確認しましたが、ライブラリは内部でも単純な文字列連結モードを使用しているようです。そのため、そのメソッドを使用してもメリットはありません。

また、これが当てはまるのか、それともブラウザがトリガーできるmousemoveイベントの量を制限しているだけなのか（Xミリ秒ごとに1回？）、パフォーマンスの最適化によってこれが改善されるのではないかと思います。

http://keith-wood.name/svg.htmlのjQuerySVGプラグインを使用していますが、奇妙な問題があります。

プラグインパッケージは非常に優れており、簡単なコードが可能です。ただし、ズームと移動機能を実装すると、コードは1台のPCでのみ機能し、他のPCやスマートフォンでは機能しません。

根本的な原因を見つけて問題を修正し、すべてのプラットフォームでズームが機能するようにします。

対象：IE8を搭載した1台のXP PC、AdobeSVGViewerアドオン付き

動作しません：Firefoxを搭載したXP PC; IE8、Firefox、Chromeで7を獲得。モバイルオペラ

関連するコードは以下のとおりです。

どんな助けでも大歓迎です。

この例では、属性を見ることができます。

jsFiddle コードはうまく機能します

ここで同じコードが機能しません。

jsFiddle コードがうまく機能しない

SVGパス要素でのマウスオーバーイベントの検出に問題があります。パス要素のstrokeWidthが小さいほど、マウスオーバーの検出に成功しないようです。

また、jquery-svgプラグインを使用して描画を行っています。

以下は、path要素でjqueryマウスオーバーイベントを使用して検出しようとするフィドルです。 マウスオーバーフィドル

以下は、mousemoveリスナーをsvgに接続し、document.getElementFromPointを使用して検出しようとするフィドルです。 getElementFromPointフィドル

特にマウスの動きが速い場合は、どちらも確実に機能しないようです。これらのいずれかをより感度の高いものにして、マウスオーバーをより適切に検出することは可能ですか？または、おそらくこれを行うためのより良い方法ですか？

バックグラウンド：

私は現在、ユーザーが家のフロアプランを作成できるフロアプラン エディターに取り組んでいます。

シナリオと問題:

長方形ではなく、L 字型の部屋を作りたい場合があります。部屋の特定の壁を分割し、分割された壁の一部をドラッグして、L 字型を作成する選択肢をユーザーに提供したいと考えています。これは、部屋の壁を選択して分割し、分割部分の 1 つをドラッグできるこの素晴らしいサイトで最もよく見ることができます。

質問：

A> Raphaeljs でこの機能を複製するにはどうすればよいですか? いくつかの計算のために、後で部屋の寸法にアクセスする必要があることに注意してください。

B> 他の方法 (SVG/CANVAS など) または他のライブラリ (processing.js、page.js、kinect.js、jQuery SVG など) でフロアプランナーを簡単に構築できますか?

ありがとう

色を変更し、すべての円を長方形に置き換えるなどの変更を行うには、既存のSVGドキュメントを読み込む必要があります。

javascriptを使用してSVGノード、またはRaphael拡張機能またはjQuerySVGにアクセスする方法についての記事を読みました。

私はjQuerySVGを使用することにしました。なぜなら、（私が読んだドキュメントの1つに書かれている:)既存のロードされたSVGをRaphaelで変更することはできないからです。それが本当かどうかはわかりません。

一方、いくつかのウェアが書かれました：jQuery SVGプラグインは時代遅れですか？！

これが正しいかどうかはわかりません。

現在、jQuerySVGプラグインを使用してSVGをロードしています。SVGは、次のような多くのサークルで構成されています。

これで、次のことが可能になります。1。）クラスdotを変更してすべての円の色を変更し、2。）すべての円を長方形に置き換えます。

最初の目標を達成するために、私は次svg.style()のように使用します。

これは機能しますが、SVGに追加のスタイル要素/ノードを追加します。

したがって、最初の質問は、既存のスタイル要素を変更/上書きする方法です。

2番目の目標を達成するために：私には、これをどのように処理するかがわかりません。

一般的にSVG要素を選択する方法がわかりません。グーグルを使用して、私はまだ何度も同じstackoverflowの質問を見つけます、それは私を助けません。また、jQuery SVGのドキュメントは、私の知る限りでは役に立ちません。（基本が欠けているため）

たとえば、すべての円の半径を変更するこの簡単なテストは機能しません。

したがって、2番目の質問は次のとおりです。SVG要素のグループを（クラスまたは要素タイプごとに）選択して変更する方法（またはトラフを繰り返す必要がある場合がありますか？）

ありがとうございました。

Keith Woods JQuery svg プラグインを使用して、2 つの異なるsvg 画像をページにロードできません。これは可能ですか？どのように？

次のコードは、最初の svg 画像を正常に出力しますが、2 番目の画像は表示され<svg version="1.1" width="1647" height="760"/>ず、コンテンツなしで Firebug Lite に " " として表示されます。(間違ったサイズでも)

投稿を作り直して、素敵で居心地が良く、きれいにしました。=)

私は SVG 形式のグラフを持っており、マウス ポインターがその上に置かれたときに任意のノードのタイトル プロパティを変更し、ポインターが離れたときに古いタイトルに戻る機能を実装したいと考えていました。これを実装するために、jQuery ライブラリを使用しようとしています。コードは次のようになります。

しかし、何らかの理由でコードが機能しておらず、期待される効果が見られません。ここで何がうまくいかないのかについてのアイデアはありますか?

編集：問題が何であるかはわかっていると思いますが、まだ解決策を探しています。そのため、ベクター グラフィックスの HTML コードでは、ノードは次のように表されます。

ここで、ホバーアクションでテキストを<title> ... </title>変更し、マウスポインターが離れたときに元に戻すようにします。

これを達成する方法について何か助けはありますか？

PS: $(this).prop("title") は未定義を返すため、ここでのタイトルは node 要素のプロパティではありません....では、それは何ですか? また、どのように変更できますか？

どうもありがとう！

私はSVGの初心者です。SVG コードの楕円要素にアウトライン/境界線を追加するためにどの属性を使用できるか疑問に思っていましたか? 実際、私は SVG と jQuery を使用してインタラクティブなグラフを作成しようとしているので、イベントが発生したときに特定の選択された楕円要素に特定の色 (濃い赤など) の実線のアウトラインを表示させる必要があります。これを行う方法を知りたいです。

ありがとう！

ユーザーが円、長方形などを描画し、必要に応じてズームインおよびズームアウトできる SVG を使用して、単純な描画アプリケーションを作成しています。

私の主な問題はストレッチです。すべての SVG 要素を歪ませずにブラウザーのサイズに引き伸ばすストレッチ ボタンを作成したいと考えています。

私のデザインでは、ヘッダーは 50 ピクセル、フッターは 25 ピクセルです。したがって、実際の描画スペースはそれを差し引いたものになります。

私はコードを書いておらず、bbox と viewbox はどこにも行きません。