問題タブ [jquery-svg]

私は非常に複雑で大きくて長生きする (何日も表示されるかもしれない) Web ページを書いていますが、これにはアイコンも必要です。これらのアイコンは SVG グラフィックであると想定されています。ページ上の場所に応じて、JavaScript 呼び出しによって SVG の色を変更する必要があります (jQuery または jQuery-SVG でさえ問題ありません)。

だから私の質問は：

• Web ページに SVG を含める最良の方法は何ですか?
  • <img>
  • <object>
  • jQuery(...).svg({loadUrl:...})
  • ...
• それらを「掛ける」方法は？
  • <div>非表示および clone()でプリロードしますか?
  • オンデマンドでロードするだけですか？
• SVG をセットアップする最良の方法は何ですか? (異なるレイヤー上の 1 つのファイル内のすべてのアイコン?場所で区切られた 1 つのファイル内のすべてのアイコン?アイコンごとに 1 つのファイル?)
• アイコンの色を変更する最良の方法は何ですか? (その線が異なる色になるはずの線のグラフィックから構成される非常に抽象的なアイコンを考えてください)

必要なブラウザーは、通常の PC およびモバイル (Android、iOS) 用の標準準拠の最新ブラウザー (Firefox、Chrome、Opera、Safari) です。Internet Explorer の互換性は必要ありません。

SVG と JavaScript に問題があります。

このコードは期待どおりに動作します。

しかし、 currentScale パラメータを次のように再割り当てしようとすると:

エラーが発生します

アラートは実行されません。SVGRoot.currentScale への割り当ての何が問題になっていますか?

アップデート：

使用するとエラーが消えます

また

しかし、 currentScale の実際の値は変わりません。setAttribute に何が渡されても、1 のままです。

WebアプリケーションにSVGline（path）オブジェクトがあり、divをドラッグ可能として使用しました。

「ドラッグ可能な」divをsvgオブジェクトにドラッグしたいと思います。そのためには、SVGライン（パス）をドロップ可能にする必要があります。次のコードを使用して、HTMLコンテンツをドラッグ可能/ドロップ可能として作成できます。

しかし、svgをドラッグ可能またはドロップ可能にする方法を教えてください。そうすれば、svgパス上でドラッグアンドドロップできます。

ありがとう

SVG ラインの Y 座標の 1 つを変更しようとしています。jQuery と SVG プラグイン + アニメーション プラグインを使用しています。私は以前に線をアニメーション化してきましたが、ここでは関数は単純に位置を変更する必要があり、

これは機能します。

これはしません。

ここで animate を使用すべきではないことはわかりますが、このコンテキストで attr や css が機能しない理由がわかりません。問題は、svgY1がその座標を特定する正しい方法ではないことだと思いますが、行き詰まっています。

この時点で、関連するすべての要素は静的です。別の関数からの干渉ではないと確信しています。

マウスを「セル」の上に移動すると、すべてのセルがページの読み込みで機能しますが、最初にクリックする必要があります。すべてのパスが同じ方法で作成され、問題のパスが最初に生成されたパスでも最後に生成されたパスでもないため、原因がわかりません。

私のプロジェクト

問題のパスは 'Co. ドニゴール」。これはTOP、左側のものです。ページの読み込み時に qtip は正しく表示されますが、クリックするまでフェードインは発生しません。これは、他のパスには当てはまりません。

何か案が？ティア。

jQuery-svgを使用して、このようなコードがあります

イベント ハンドラー はbind、jQuery-svg-dom が SVG データ内の要素を選択できるようになる前に起動されます。私のコードは、SVG を調べて、さまざまなクラスを割り当て、さまざまな要素にリスナーをアタッチすることになっていますが、何も見つかりません。すべてがロードされた後にコンソールを呼び出すbindと、すべての SVG 要素を見つけることができます。

私は何か間違ったことをしていますか？SVG DOM がいつ利用可能かを検出する別の方法はありますか? 私はタイマーを使用することを考えましたが、特に SVG ファイルが数 MB になる可能性があることを考えると、それは本当にハックです。

SVG のレンダリングには、jQuery SVG プラグインを使用しています。そして、各パスとポリゴンにテキストを追加したいと思います。jsFiddleでは、プラグインによって生成されたマークアップを確認できます。

テキストを作成するために、次のコードを書きました。

jsFiddleのコードでは、textpathタグが存在することがわかりますが、表示されません。各パスの中央にテキストを追加する方法は?
ありがとう。

何度か試行し、コードを変更した後、SVG内に長方形を作成して位置を変更することはできません。アニメーション化を要求することすらしないでください。明らかに、jQuerySVGプラグインとアニメーション拡張機能を使用しています。

問題：3つの内側にラップされたSVG 、内側のyには長方形があり、ドキュメントの読み込み後に<div>配置する必要があります。y:0そしてこれはコードです：

まあ、長方形には何も起こりません、それは元の座標を保持します。Chromeコンソールも何も言いません。

追加：問題のHTML

私は<canvas>これに喜んで使用しますが、結果はわかりません。

キャンバスを SVG 要素に挿入する必要があります。SVG を使用する d3js とキャンバスを作成する jquery スパークラインを使用しているため、SVG にキャンバスが必要です。スパークライン グラフを svg 要素の一部にする方法はありますか? SVG でスパークラインを使用してグラフを描画しようとしましたが、c.innerHTML が未定義であるというエラーが返されました。

ありがとう！

divを含むforeignObjectを持つSVG要素があります。次に、私のjsでこれを行います：

div内にキャンバスを作成します。2 つのブラウザーの firebug html コードを見ると、次のようになります。

ファイアフォックス:

クロム：

クロムでは、divさえ表示されません。私がdivを作成する方法は

Firefox は期待どおりに動作しています。しかし、クロムはそうではありません。誰か提案はありますか？

また、問題の一部は、chrome firebug HTML 出力には「foreignobject」が表示されますが、Firefox には追加した方法で「foreignObject」が表示されることだと思います。