1

デスクトップ、iPad、Android で動作するオンライン パーキング システムを作成する必要があります。駐車場の .svg 形式の地図があります。

私の質問は次のとおりです。そのマップをブラウザーにレンダリングし、スロットのクリックごとに JavaScript タスクを実行するにはどうすればよいですか。

asp.netを使用してプロジェクトを開発しています。現在、.svg をキャンバスに変換しようとしています。

私はこのグラフィカルなものに不慣れで、しばらくそれを使い続けています。より良い方法を教えていただくか、このアプローチのサンプル リンクを提供してください。

ありがとう

4

2 に答える 2

1

jQuerySVG の要素は DOM のメンバーでもあるため (そのように挿入された場合)、 orのようなものでそれらを選択してdocument.querySelector()も問題ありません。ただし、すべてのブラウザー (< IE9) が SVG を生の形式で処理できるわけではありません (これにより、このシームレスな JavaScript 統合が無効になります)。

私は最近のプロジェクトでこれを行いましたが、魅力的に機能しました。

Web で SVG を使用する際に考慮すべき点は、まず SVG のサイズです。大きなファイルは、特に JavaScript 操作とイベントを適用する場合に、すべてを遅くする傾向があります。さらに、SVG ファイルをできるだけきれいに保ちます。一部の SVG ソフトウェアは「XML ノイズ」ノードを挿入しますが、これはレンダリングには必要なく、生の形式を DOM に挿入できなくします。

SVG を DOM に統合するには、SVG ファイルの内容を現在の DOM ノードにロードする必要があります。私は JavaScript でこれを行いましたが、メソッドは出力にとって重要ではありません。

例;

...
   <div class="svg-node" data-svg-file="/images/file.svg"></div>
...

そして、それらを jQuery でロードし、イベント ハンドラーをアタッチします。

$(document).ready(function () {

    var svgFile = $('.svg-node').attr('data-svg-file');

    $.ajax({
        'url': svgFile,
        'type': 'get',
        'dataType': 'text',
        'success': function (svgContent) {

            $('.svg-node').html(svgContent);
            $('.svg-node #an-elements-id').on('click', handleEvent);

        }
    });

});

残念ながら、ほとんどの Web ブラウザには、このアプローチにいくつかの問題があります。SVG グループは DOM を介して処理できず、必要なノード属性をアタッチすることもできません。サポートされているのはごくわずかです。

しかし、全体として、これは単純明快で簡単な実装であり、ほとんどのブラウザーで機能します。

于 2012-10-05T11:58:15.127 に答える
0

イベント処理を SVG グラフィックスに追加する方法のチュートリアルを次に示します。

于 2012-10-05T11:55:52.807 に答える