Javascript svg和html在事件模型上的差异_Javascript_Svg

Javascript svg和html在事件模型上的差异

javascript svg

Javascript svg和html在事件模型上的差异,javascript,svg,Javascript,Svg,发现在这个例子中：如果我尝试在html中使用相同的代码，则根本不起作用：未捕获引用错误：未定义evt 是什么导致了这种行为？您可以通过以下三件事使其正常工作 1.更改html代码（如下所示）以在svg标记加载后移动库加载；并向svg元素添加一个id： <html> <div> <svg> <svg id='svgCanvas'> ... <svg> <script xlink:href="SVGPan.js"/>

发现在这个例子中：如果我尝试在html中使用相同的代码，则根本不起作用：

未捕获引用错误：未定义evt

是什么导致了这种行为？

您可以通过以下三件事使其正常工作

1.更改html代码（如下所示）以在svg标记加载后移动库加载；并向svg元素添加一个id：

<html>
<div>
<svg>  
<svg id='svgCanvas'> ... <svg> 
<script xlink:href="SVGPan.js"/> 
</html>

3.更改库代码函数setupHandlers，如下所示（mousewheel事件现在绑定到根目录，而不是文档）：

另请参见此图。

将svg嵌入到html文件中

<html>
<head></head>
<body>
<!-- solution 1 -->
<object type="image/svg+xml" data="group_drag.svg"></object>
<!-- solution 2 -->
<embed type="image/svg+xml" src="group_drag.svg" />
<!-- solution 3 -->
<iframe src="group_drag.svg"></iframe>
</body>
</html>

请在问题中输入相关代码，并列出显示问题的浏览器（包括版本号）。

function setupHandlers(root){
//  if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)
//      document.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
//  else
//      document.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Others

    if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)
        root.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
    else
        root.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Others
}

<html>
<head></head>
<body>
<!-- solution 1 -->
<object type="image/svg+xml" data="group_drag.svg"></object>
<!-- solution 2 -->
<embed type="image/svg+xml" src="group_drag.svg" />
<!-- solution 3 -->
<iframe src="group_drag.svg"></iframe>
</body>
</html>