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

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

css html

Css 如何在svg元素上添加HTML控件？,css,html,Css,Html,基于以下SO，我将显示一个svg元素，以便占据整个浏览器窗口。这个很好用。但是，如果我还向窗口添加一个按钮，它将不再处理任何事件（例如单击）。我尝试使用按钮的z顺序，以便它显示在svg元素的顶部，但它并没有解决问题。以下是我的布局的HTML代码： <html lang="en"> <head> <script src="scripts/jquery-3.2.1.min.js"></script> <

基于以下SO，我将显示一个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>


html，正文{边距：0；填充：0；溢出：隐藏}
svg{位置：固定；顶部：0；左侧：0；高度：100%；宽度：100%}

注意：通过尝试修改SVG元素的zindex，按钮将再次变得可单击，但在这种情况下，SVG元素不再处理事件。我需要一个两个元素都可以处理事件的解决方案

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

好吧，我想出来了：

将

z-index

s添加到按钮和svg中，以便按钮显示在svg的顶部。请注意，如前所述，您需要为

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>


html，正文{边距：0；填充：0；溢出：隐藏}
svg{位置：固定；z索引：1；顶部：0；左侧：0；高度：100%；宽度：100%}

顶部是指SVG重叠？是的，我指的是SVG元素占据整个窗口并具有重叠的HTML控件（窗口中显示的按钮、文本字段等）。在上一个代码示例中，按钮显示正确，但不再“可单击”“您还需要为要考虑的z-index提供一个位置值。”这是我的关键，thx BigO！为我的div和zIndex指定position=“absolute”！