0

Chrome Web Inspector を使用して SVG 要素にマウス イベントをフックidし、SVG ポリゴン タグに を割り当ててから、それをフックするの$()と同等のネイティブを使用することができます。document.getElementById

$("#THISONE").addEventListener('click', function() { console.log('clicked it'); });

jQuery DOM メソッドを使用できるようになるとよいので、これを使用する際の負担を少し軽減したいと考えています。

そう...

(function() {                                          
    var jq = document.createElement('script');         
    jq.src = "http://code.jquery.com/jquery-latest.js";
    document.appendChild(jq);                                                
})();

生成しUncaught TypeError: Cannot call method 'appendChild' of nullます。どうやらdocument存在しないようです。documentjs コンソールからアクセスできますが、ブックマークレットとしてロードされたこの機能は機能しません。

次に、コンテンツをjsコンソールに貼り付けようとしましたが、これが生成されます:

Error: HierarchyRequestError: DOM Exception 3
code: 3
message: "HierarchyRequestError: DOM Exception 3"
name: "HierarchyRequestError"
stack: "Error: A Node was inserted somewhere it doesn't belong.↵    at <anonymous>:4:10↵    at Object.InjectedScript._evaluateOn (<anonymous>:602:39)↵    at Object.InjectedScript._evaluateAndWrap (<anonymous>:521:52)↵    at Object.InjectedScript.evaluate (<anonymous>:440:21)"
__proto__: DOMException

任意のヒント？

私の理想的な目標は、Chrome で開いている SVG で使用できるブックマークレットを作成することです。これにより、特定の要素のクリックに応答してポップアップを表示したり、色を変更したりできる委任イベント ハンドラーがインストールされます。

特に、私は によって作成されたグラフの膨大な SVG を扱っていdotます。これらのグラフには、蛇行した長いエッジ パスがあり、それらをたどることはほぼ不可能なように重なり合っています。したがって、ノードをクリックすると、ノードに発生するエッジのみを強調表示したいと思います。

それができない場合は、svg を HTML Web ページに埋め込むか、リソースからリンクするハックに頼ります。ややエレガントではありませんが、十分に機能します。

4

0 に答える 0