svg要素の上にHTMLコントロールを追加するには？

次のように、SO solutionに基づいて、ブラウザのウィンドウ全体を占有するようにsvg要素を表示しています。これは完全に正常に動作します。しかし、私がウィンドウにボタンを追加しても、それはもはやイベント（クリックなど）を処理しません。私はsvg要素の上に表示されるようにボタンのzオーダーで試してみましたが、問題は解決しません。ここに私のレイアウトの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要素ののZIndexを変更しようとすることで、その後、ボタンをもう一度クリック可能その場合にはSVG要素は、もはやイベントを処理しないんになります。私は両方の要素がイベントを処理できる解決策が必要です

CSSを修正するための助けがあれば幸いです！

出典

2017-08-10 BigONotation

上に重なるSVGを意味しますか？ –

はいSVG要素がフルウィンドウを占めており、重複するHTMLコントロール（ボタン、テキストフィールドなどがウィンドウに表示されます）を持っています – BigONotation

前のコードサンプルでは、ボタンは正しく表示されていましたが、 – BigONotation

OKはそれを考え出した：

追加z-index秒ボタンと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コントロールを追加するには？

答えて

関連する問題