他の要素の上に位置するsvg要素の位置

Question

これは他の場所では私が見ているので答えられていることは分かっていますが、私が見つけることができるものはこれまでにないようです。

透明なsvg要素をキャンバス要素の上に正確に追加するだけですが、追加するたびに、svgはキャンバスの下に置かれます。位置決めとZ-インデックスを試しても問題ありません。

助けを借りて私のnewb質問に申し訳ありません、私はコーディングに新しいです。ここで私は適切だと思うのコードです：

はここにCSSです：

canvas { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

、キャンバスのためのjavascript：

var width = screen.width; 
var height= screen.height; 
canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
canvas.width = width; 
canvas.height = height; 

、最後に要素を作成し、追加のための私のjavascript：

function getCanvas(canvas) { 
    var top = canvas.css('top'); 
    var left = canvas.css('left'); 
    var canvaswidth = canvas.width(); 
    var canvasheight = canvas.height(); 
    var svg = $('<svg>Hey</svg>').attr({ 
     'xmlns': 'http://www.w3.org/2000/svg', 
     'width': canvaswidth, 
     'height': canvasheight, 
     'top': top, 
     'left': left, 
     'position': 'absolute', 
     'opacity': 1, 
     'id': 'svg' 
    }); 
    svg.css({backgroundColor: 'black', 'z-index': 10}); 
    svg.insertAfter(canvas); 
} 

ありがとうございました！

Answer 1

あなたはキャンバス要素の後ろにあるので、あなたはz-indexをまったく持っている必要はありません。

問題は、プロパティpositionが正しい方法で設定されていないことに起因します。 スタイルプロパティとしてではなく、属性として設定されています。

canvas = $('#canvas'); 
 
var svg = $('<svg><text x="50" y="50">Hey</text></svg>').attr({ 
 
    xmlns: 'http://www.w3.org/2000/svg', 
 
    id: 'svg' 
 
}).css({ 
 
    position: 'absolute', 
 
    top: canvas.css('top'), 
 
    left: canvas.css('left'), 
 
    width: canvas.width(), 
 
    height: canvas.height(), 
 
    opacity: 1, 
 
}); 
 
svg.insertAfter(canvas);

canvas { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id="canvas"></canvas>