Question

我想在iframe上添加网格线，同时仍然可以访问iframe。这些线条将用于指示不同的屏幕尺寸，不应干扰它们背后的任何交互。

我已经能够显示一些行，但它们不会拉伸整个iframe高度，并且无法访问它们下方的项目。

 <div id="wrapper">
      <svg class="gridlines">
           <line x1="200" y1="0" x2="200" y2="200" class="leftLine" style="stroke: rgb(255, 0, 0); stroke-width: 2px;"></line>
           <line x1="400" y1="0" x2="400" y2="400" class="rightLine" style="stroke: rgb(255, 0, 0); stroke-width: 2px;"></line></svg>
      </div>
      <iframe src='...'></iframe>
 </div>

#wrapper {
  position: relative;
}

.gridlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gridlines lines {
  stroke: red;
  stroke-width: 2;
}
.gridlines .leftline {
  border: 1px solid #000;
}

Answer 1

将您的SVG置于iframe之上，然后设置pointer-events: none

＆＃13;

#wrapper {
  position: relative;
  width: 500px;
  height: 400px;
}  

.gridlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

iframe {
  width: 100%;
  height: 100%;
}

＆＃13;

<div id="wrapper">
  <iframe src="."></iframe>

  <svg class="gridlines">
    <line x1="200" y1="0" x2="200" y2="200" class="leftLine" style="stroke: rgb(255, 0, 0); stroke-width: 2px;"></line>
    <line x1="400" y1="0" x2="400" y2="400" class="rightLine" style="stroke: rgb(255, 0, 0); stroke-width: 2px;"></line>
  </svg>

</div>

＆＃13;

iframe上的SVG覆盖/网格线

1 个答案: