我可以通过使用 Chrome Web Inspector 进入 SVG 元素,将鼠标事件分配id
给 SVG 多边形标签,然后使用$()
相当于挂钩的本机来挂钩 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
不存在。document
可从 js 控制台访问,但作为书签加载的此功能不起作用。
然后我尝试将内容粘贴到 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 上使用的书签,它将安装一个委托事件处理程序,该处理程序可以执行诸如响应单击某些元素以提供弹出窗口或更改颜色之类的事情。
特别是我正在处理由dot
. 这些图有很长的蛇形边缘路径,它们以这样的方式重叠,几乎不可能跟随它们。因此,如果单击节点,我只想突出显示节点上的边缘。
如果做不到这一点,我将求助于一些将 svg 嵌入 html 网页或从资源链接的技巧。稍微不那么优雅但足够实用。