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

【问题标题】：How to add HTML controls on top of svg element?如何在 svg 元素上添加 HTML 控件？
【发布时间】：2018-01-18 11:04:20
【问题描述】：

基于以下 SO solution，我正在显示一个 svg 元素，以便占据整个浏览器窗口。这工作得很好。但是，如果我还在窗口中添加了一个按钮，它就不再处理任何事件（例如单击）。我尝试使用按钮的 z 顺序，以便它显示在 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 元素的 zindex，按钮将再次变为可点击，但在这种情况下，SVG 元素不再处理事件。我需要一个两个元素都可以处理事件的解决方案

任何帮助修复 css 将不胜感激！

【问题讨论】：

在顶部你的意思是在 SVG 上重叠它？
是的，我的意思是 SVG 元素占据整个窗口并具有重叠的 HTML 控件（窗口中显示的按钮、文本字段等）
在前面的代码示例中，按钮显示正确但不再“可点击”

标签： css html

【解决方案1】：

好的，想通了：

在按钮和 svg 中添加了z-indexs，以便按钮显示在 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>

【讨论】：

“您还需要为 z-index 提供一个位置值以将其考虑在内。” 这对我来说是关键，谢谢 BigO！为我的 div 和我的 zIndex 指定 position="absolute" 工作！