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 に答える