Question

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

Answer 1

只有嵌入式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>

eventsDemo.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>

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

1 个答案: