問題タブ [jquery-svg]

keith-wood jquery プラグインを動的に使用して、SVG キャンバスを HTML でインラインで作成しました。

SVG 要素で viewBox 属性を使用して、SVG キャンバスのコンテンツをスケーリングしました。

SVG キャンバス内に、それぞれ 1x1 単位の繰り返しパターン (タイル) で四角形を描画します。

800x800 のボード:

ユーザーが SVG 内の要素の 1 つにカーソルを合わせたときに、マウス イベントの pageX と pageY のピクセル座標を、viewBox のスケーリングを考慮してタイルの座標に変換したいと考えています。したがって、ユーザーが最初のタイルにカーソルを合わせた場合、e.pageX と e.pageY を指定すると、{x: 0, y: 0} が返されます。ここで、e は mousemove jquery イベント オブジェクトです。

これを計算するにはどうすればよいですか？

ありがとう

kendoui デモから次のコードを変更しました。

http://jsbin.com/alupin/6/

マウスオーバーでバブルのサイズを拡大し、マウスアウトで元のサイズに戻そうとしていますが、円の境界線のトレースを取得しています。

kendoui を使用してグラフを描画し、jquery svg を使用して svg 要素をアニメーション化しています。

助けてくれてありがとう。

私を助けてください！私はinkscapeでいくつかの形状を作成し、それをSVGとして保存しました.作成したパスはIDを与えました.今、私はSVGファイルをhtmlにリンクしており、jQueryでそれらのパス（id = path123）にアクセスしたいことがわかっています. jQueryで編集と操作を開始します。

私の義務は、これらのパスの 1 つにカーソルを合わせると、いくつかの情報を含むツール ヒントが表示されることです。

私は入れようとしました

PS。私はグーグルで検索し、jqueryでsvgを編集する他の例を見つけましたが、inkscapeから作成されたこのファイルでそれを行う方法を見つけることができません.

これは私がinkscapeで作成したsvgファイルコードです

アニありがとう

以下のコーディングは IE で正常に動作します。しかし、矢印マークはクロームで左向きになっています。

正確な問題は何ですか。pls、誰か教えてください。?

対応する jsfiddle は次のとおりです。

灰色の領域の幅を変更し、1 から 100 までの値に基づいて円レイヤーを移動しようとしています。

SVG 画像で D3.js を使用しています。以下はsvg画像のコードですが、パスタグにはそれを行うための直接の属性がないため、幅を変更できません。

私は見てきました：http://jvectormap.com/

そして、私は自分自身で似たようなことをしたいと思っています。基本的には、マウスを重ねるとグレーが濃くなり、明らかに値が関連付けられた別個のゾーン (タイムゾーン用) を持つ世界地図です。

しかし、私はこれを行う方法について完全に混乱しています。

私は SVG について聞いたことがあり、1 つまたは 2 つのことを試してみましたが、誰かが私を正しい方向に向けることができれば、喜んで役に立ちます。

通常、私はそのようなありふれた質問をしませんが、ここでは本当に困惑しています。

jquery.i を使用してマップ内の状態を強調表示する際に問題が発生し、javascript を使用して実装しました。` SVG Illustrator テスト

`

このコードでは状態が簡単に強調表示されますが、ツールチップも追加したいのでjqueryでやりたいので、マウスオーバー時に状態名も表示されます。基本的に、SVGのIDまたはクラスまたはタグを使用して、jqueryを使用してさまざまなアクションを実行する方法を知りたいです。

私はこのコードを持っています：

drawSvgでsvgCanvasHeightを動的に取得して、ウィンドウのサイズが変更されたときにsvgのviewBoxとsvgもサイズ変更されるようにするにはどうすればよいですか？

内部に境界リング（緑と静的）があり、いくつかの「パルス状」の外側の円（青）がある円があります。静的な円の内側にある「パルス円」の部分のみを表示するには、これにどのようにアプローチしますか?

参照用に HTML をレンダリングする JS も含めましたが、JSFiddle で SVG を生成しません。

SVGにはレイヤーが存在すると思いますが、他の円のレンダリングをどのように構成したかを考えると、それはあまり役に立ちません。 操作方法を簡単にレビューします。

1. オレンジ色のグラデーションで背景の円を描き、その上に同心円を配置します。
2. 緑の静止円を描きます。
3. デカルト平面の基点に 4 つのパルスを配置します。
4. パルスをアニメーション化します。

メインの円の境界内でクリックを測定できることはわかっているので、パルスのアニメーションを (おそらくハッキーな方法で) 緑色の円のリング内に制限できることを期待しています。

たぶん、逆の塗りつぶしまたは何かがある上に配置された他の円ですか？アイデアを吐き出すだけです。私が知っていることはすべて試しましたが、他の例やアイデアの研究を見つけることができません。

これを達成する方法を考えるのに役立つ関連記事:

(円の) 円弧の SVG パスを計算する方法

2 つの画像 (png) と 2 つのビデオ (mp4) があります。次のシーケンスでスライドショーを作成する必要があります:

• ビデオ #1 を再生します。
• 画像を表示し、画像の下部にフェード効果のあるテキストを表示します。
• 動きのある別の画像を表示し、中央にズームします。
• ビデオ #2 を再生します。

SVG のみを使用する必要があります。example.svg を実行するだけで、上記のスライドショーが再生されるはずです。

前もって感謝します