如何在嵌入数据上调用鼠标函数

How to call mouse functions on embed data?

本文关键字：调用 鼠标 函数 数据      更新时间：2023-09-26

我的网站上有一些嵌入的svg文件。我想在它们上使用onmouseclick、onmouseout和onmousemove函数，但它们不起作用。有可能做到吗？

只有从同一域提供嵌入的SVG脚本时，才有可能。在嵌入的内容完成加载后，您希望使用getSVGDocument获得实际的svg文档。从那里可以添加事件。看看这个演示：

rect.svg

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     width="300"
     height="200">
  <rect x="50" y="25" width="200" height="150" fill="red"/>
</svg>

事件Demo.js

var log, emb, svgDoc, rect;
log = function ( e ) {
  console.log( e.type );
};
emb = document.querySelector( 'embed' );
emb.addEventListener( 'load', function () {
  svgDoc = emb.getSVGDocument();
  rect   = svgDoc.querySelector( 'rect' );
  rect.addEventListener( 'click',     log );
  rect.addEventListener( 'mousemove', log );
  rect.addEventListener( 'mouseout',  log );
} );

demo.html

<!doctype html>
<html>
<head>
</head>
<body>
  <embed type='image/svg+xml' src='rect.svg'>
  <script src='eventsDemo.js'></script>
</body>
</html>
相关文章：