0

我有一个绑定到一个div元素的点击事件，在这个 div 中我使用 iframe 嵌入了一个 SVG 文件（我尝试过使用对象/嵌入元素，结果是相同的），如下所示：

<div id="example">
 <iframe src="example.svg" type="image/svg+xml" width="100%" height="100%"></iframe>
</div>

当我添加 iframe 元素时，它的父母点击事件不再触发。

如果我将 SVG 嵌入到IMG元素中，一切都很好，但 svg 缩放不再正常工作。

有没有一个优雅的解决方法？

提前致谢。

4

1 回答 1

1

你可以尝试屏蔽 iframe

<html>
  <head>
    <style type="text/css">
      #wrapper {
        width:1000px;
        height:600px;
        position:relative;
      }
      #wrapper:after {
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index:2;
      }
    </style>
  </head>
  <body>
    <div id="wrapper" onclick="alert('hi mondo');">
      <iframe src="harvest.svg" type="image/svg+xml" frameborder="0"
              style="width:100%;height:100%;"></iframe>
    </div>
  </body>
</html>

此解决方案的问题在于上下文菜单不再与图像相关。

于 2012-11-05T14:05:13.837 回答