iframe上的SVG覆蓋/網格線

我想在iframe上添加網格線，同時仍然保持iframe可訪問。這些線將用於指示不同的屏幕尺寸，並且不應該干擾它們之後的任何交互。iframe上的SVG覆蓋/網格線

我已經能夠顯示一些行，但他們沒有展開完整的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; 
}

來源

2015-12-15 mauzilla

把你的iframe的頂部您的SVG，並設置pointer-events: none

#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%; 
 
}

<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>

來源

2015-12-15 08:41:33

iframe上的SVG覆蓋/網格線

回答

相關問題