Css iframe上的SVG覆盖/网格线

我希望在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;
}

#包装纸{
位置：相对位置；
}
.网格线{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.网格线{
笔画：红色；
笔画宽度：2；
}
.格线.左线{
边框：1px实心#000；
}

将SVG放在iframe的顶部，并设置

指针事件：无

#包装器{
位置：相对位置；
宽度：500px；
高度：400px；
}  
.网格线{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
指针事件：无；
}
iframe{
宽度：100%；
身高：100%；
}