問題タブ [jquery-svg]

ユーザーがマップ内のさまざまな州をクリックして、その州に固有の情報を取得できるインタラクティブマップを作成しようとしています。

例：

• アーカイブ： http： //www.todospelaeducacao.org.br/

• アーカイブ：http ：//code.google.com/p/svg2imap/

これまでのところ、機能が制限されているソリューションしか見つかりませんでした。私は実際にSVGファイルを使用してこれを検索しただけですが、可能であれば他のファイルタイプを受け入れるでしょう。

これを行うための完全に機能する方法（jQueryプラグイン、PHPスクリプト、ベクター画像）または手動で行う方法のチュートリアルを知っている人がいる場合は、共有してください。

おそらく複雑なSVGのダブルバッファリングをシミュレートするより良い方法は何でしょうか。変更された SVG を頻繁にリロードしていますが、ロードの遅延を解消したいと考えています。2 つの重複した DIV を使用し、onLoad 後に可視性を切り替えることを考えていました。より良い代替手段はありますか？

編集

これで、スタイル表示の切り替え (ブロック/なし) を使用して、重複する DIV に 2 つの SVG インスタンスを実装しました。FF ではほとんど機能しました (スムーズでスムーズなモーフィング、最初の表示だけで領域が縮小されました) が、Chrome は、形状の位置を同期するために必要な ScreenCTM 変換を取得することを拒否します。これらの問題 (FF で部分領域がレンダリングされる、Chrome でレンダリングされない) が関連していると思います。現在、代わりに visibility:hidden を試しています。

編集

可視性を切り替えると、許容できる結果が得られます。これまでご協力いただきありがとうございました。

編集

問題が見つかったので、ここでもう一度助けてください: SVG に関連しない UI に Boostrap を使用していますが、ツールバーの動作が非常に奇妙です: 2^ DIV (最初は非表示) の可視性を切り替えたとき、イベントがツールバーに到着します。再び 1^ に切り替えると、イベントは問題ありません。

position:absolute または position:fixed の使用は同じであり (もちろん、イベントの問題の場合)、top:0 が「原因」であることがわかりました。0 より大きい任意の値を使用すると、イベントが流れますが、DIV は非表示になります。したがって、最初の質問は理にかなっています: 可視性を切り替えるよりも良い方法はありますか? またはhtml構造のヒント？現在、私のHTMLは次のようになっています

div の svg 表現を取得しようとしています。このhttp://keith-wood.name/svg.htmlに jQuery SVG を使用しています。

私はページの読み込み時にこれを行っています:

そして div 内のすべての変更で、私はこれをやっています:

しかし、私はアラートでいくつかのJSコードを取得しています。私は警告を試みsvg.toSVG()ましたが、私はこれを得ています:

<svg version='1.1'></svg>警戒中

svg.toSVG()動作しているようですが、divにデータが含まれていても空のsvgドキュメントを取得しています。

私はここで何を間違っていますか？

Rachel でなんとか六角形を作成し、それにストロークと塗りつぶしイメージを与え、(StackOverFlow の助けを借りて) 六角形に反転アニメーションを作成することができました。

しかし、私は問題に直面しています。六角形が反転しても、背景画像は反転しません。六角形を反転させる方法はありますが、反転しているため、背景画像も反転しています。

ここに私が現在持っているものがあります:

人がページの1つに着地したときに、その場でsvgイメージタグを生成するJavaScriptコードがあります。画像の作成に役立つd3ライブラリを使用しています。唯一の問題は、d3が完全にIEと互換性がなく、svgファイルに基づいて.png、jpg、gif、またはその他の画像ファイルを生成したいということです。これを行うための既知の方法はありますか？サーバー側のコードはPHPベースであり、多くの動的コンテンツにnode.jsとrender.jsを使用しています。

SVG、jquery (keith woods wrapper)、Web サービスなどを使用してオンライン グラフィック エディターを作成しました。これは、Google Docs Drawing アプリケーションと同じように機能します。要素のフォントを変更するようにエディターをコーディングしましたが、ImageMagick または Inkscape を使用してグラフィック (png または jpg) を生成するときに、太字、斜体、および下線がフォントで機能しないことを除いて、うまく機能します。ただし、Web ページ内で SVG を表示する場合、太字、斜体、および下線は完全に機能します。

Stack Overflow について少し調査したところ、CSS はフォント スタイルを解釈し、イタリックのフォントに傾斜を追加し、ボールドのストロークを追加することを指摘する人がいます。

Google ドキュメントの描画では、テキストのパスが生成されることに気付きました。テキストをトレースしてパスを生成する関数または方法を見つけることができれば、これは良い解決策になると思います。私はまだこのようなことを試している段階ではありませんが、まずはここに来て意見を聞きたいと思いました。他の誰かがこの困難を経験しましたか? もしそうなら、どのようにそれを克服しましたか？SVG フォントを提案している人を見たことがありますが、どうやら FireFox ではサポートされておらず、IE ではほとんどサポートされていないので、私はその考えにうんざりしていますか? エディターをすべてのブラウザーで動作させるのは少し悪夢のようでしたが、現在の状態に到達するまでに多くのハードルを飛び越えました。フォントのような単純なものが邪魔になることは望んでいません。

システムはウェブ上で公開されており、人々はそれを使用できますが、太字、斜体、下線は無効になっているため、誰かがこれについてアドバイスをくれると非常にありがたいです。

前もって感謝します

私はこのjavascriptファイルを持っています（$（ "＃paper2"）はdivです）

基本的に、divの上でマウスキーを押したままにすると、マウスに続くポリラインが描画され始め、基本的な描画が可能になります。OperaとChromeでは正常に動作しますが、Firefoxでは、最初に描画したポリラインで正常に動作し、2回目（マウスを離してからもう一度押す）では、画像をドラッグしているように動作します（すべてのSVGのもの）それは私のdiv内にあり、私のマウスに従います）、mouse-upイベントは呼び出されません。したがって、この2回目のマウスボタンを離すと、ポリラインの描画が正常に開始されますが、クリックは下がっていません。もう一度クリックすると、マウスアップイベントが発生し、正常に動作し始めます。これは、2回目に線を引こうとしたときにのみ発生し、1回目、3回目、およびそれ以降はすべて正常に機能します。

私が何か間違ったことをしているのか、それともこれが実際にFirefoxのバグであるのか、誰かが回避策を知っているのであれば、誰もが知っていますか？

アプリケーションでsvgを取得しました。好き

'1_dice'という名前のsvg要素を取得しました。HTMLボタンをクリックして、パラメータに従って要素をアニメーション化したいと思います。好き

私はこれを試しましたが、これは機能しません...

プロジェクトでJquerySVGプラグインを使用しています。svgをより小さなサイズでロードするために次のコードを書いたさまざまなサイズにsvgのサイズを変更したい

ただし、常に100％サイズで画像を開きます。SVGをさまざまなサイズで表示する方法を教えてください。

Raphaelのノード関数を使用してDOMオブジェクトを取得し、コンテキストメニュー用のイベントハンドラーを1つ追加しようとしています。ただし、DOMオブジェクトのイベントハンドラーからRaphael要素を取得する必要がありますか？

明確にするために、サンプルコードは次のようになります。

誰かがそれを達成する方法を知っていますか？