SVG对象父节点上的JavaScript事件

JavaScript Events on Parent of SVG Object

本文关键字：JavaScript 事件 对象 父节点 SVG      更新时间：2023-09-26

我目前正在编写一个脚本，该脚本允许用户在SVG文档中嵌入JavaScript文件，以实现内容的平移和缩放。我尝试了几乎所有我能找到的SVG平移和缩放的变体，但只找到了一种具有一致的跨浏览器支持。不幸的是，在编写脚本时假设SVG将在HTML中写入，而不是通过对象标记嵌入。由于我正在处理相当多的预渲染SVG，因此仅链接到每个SVG中的外部JavaScript文件会更有效。到目前为止，转换的一切都进行得很顺利，但是我遇到了一点障碍。该脚本依赖于鼠标事件击中包装SVG对象的div。它看起来像这样:

<div id="svgwindow">
  <div id="wrapper">
    <object id="svg" data="test.svg" type="image/svg+xml"></object>
  </div>
</div>

JavaScript的一个例子:

parent.document.getElementById("svgwindow").addEventListener("mousewheel", Zoom, false);

只要事件发生在svg对象未填充的svgwindow区域，此脚本就可以成功添加事件。一旦事件发生在对象之上，事件就不会被捕获。我还没有找到任何类似的实例来帮助解决这个错误，所以任何帮助将是伟大的。

由于<object>标签将捕获所有事件，并且没有办法阻止它，因此您所能做的就是将另一个<div>绝对放置在将接收事件的包装器<div>的顶部。

当然，如果你交换到<image>标签而不是<object>标签，不会捕获事件，但对图像有限制，例如，所有数据必须在一个文件中，不允许脚本，这可能使它不适合你。如果合适的话，这是最简单的方法。

相关文章：