如何在svg元素上添加HTML控件？

主要基於以下SO solution，使佔據整個瀏覽器窗口，我顯示SVG元素。這工作非常好。但是，如果我還向窗口添加按鈕，則不再處理任何事件（如點擊）。我試圖玩按鈕的z順序，以便它顯示在svg元素的頂部，但它不能解決問題。這裏是我的佈局的HTML代碼：如何在svg元素上添加HTML控件？

<html lang="en"> 
    <head> 
     <script src="scripts/jquery-3.2.1.min.js"></script> 
     <script src="scripts/snap.svg-min.js"></script> 
     <style> 
      html, body { margin:0; padding:0; overflow:hidden } 
      svg { position:fixed; top:0; left:0; height:100%; width:100% } 
     </style> 
    </head> 
    <body> 
     <div> 
      <input style="margin-top: 10px;margin-left:10px"; type="button" value="test"/> 
     </div> 
     <div class="output"> 
      <svg id="root"></svg> 
     </div> 
    </body> 
</html>

注：試圖通過修改SVG元素的Z-索引，則該按鈕變爲可點擊一次，但在這種情況下，SVG元素也不再處理事件。我需要一個解決方案，這兩個元素可處理事件

任何幫助修復的CSS將不勝感激！

來源

2017-08-10 BigONotation

通過在頂部，你的意思是在SVG重疊呢？ –

是的，我的意思是SVG元素佔據整個窗口和具有重疊HTML控件（按鈕，文本框，等顯示在窗口中） – BigONotation

在前面的代碼示例中，被正確地顯示的按鈕，但它不再是「可點擊」 – BigONotation

OK想通了：

新增z-index s到兩個按鈕和SVG，使得按鈕顯示在SVG之上。注意，解釋here，你需要使用正確的價值觀爲z-index事件處理工作。您還需要爲z-index提供一個position值作爲考慮因素。

<html lang="en"> 
    <head> 
     <script src="scripts/jquery-3.2.1.min.js"></script> 
     <script src="scripts/snap.svg-min.js"></script> 
     <style> 
      html, body { margin:0; padding:0; overflow:hidden } 
      svg { position:fixed; z-index:1; top:0; left:0; height:100%; width:100% } 
     </style> 
    </head> 
    <body> 
     <div> 
      <input style="position:fixed; z-index:2; margin-top: 10px;margin-left:10px"; type="button" value="test"/> 
     </div> 
     <div class="output"> 
      <svg id="root"></svg> 
     </div> 
    </body> 
</html>

來源

2017-08-10 09:39:14 BigONotation

如何在svg元素上添加HTML控件？

回答

相關問題