Pozisyon svg elementi başka bir elemanın tepesinde daha yüksek

Question

Bunun başka yerlerde yanıtlandığına inanıyorum çünkü baktım, ama bulabileceğim hiçbir şey, daha önce sorulmuş olan bir soruyu yayınladığım için aldatıcı bir şey gibi görünüyor.

Sadece benim tuval öğesinin üzerine bir şeffaf svg öğesi eklemem gerekir, ancak her eklediğimde, svg konumlandırma ve z-endeksiyle denediğim önemli değil, tuvalin altına gider.

Yardım için şimdiden teşekkürler ve yeni soru için özür dilerim, kodlama konusunda yeniyim. İşte bence kod uygun mi:

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

ve tuval için JavaScript:

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

ve oluşturma ve eleman ekleme için sonunda benim javascript:

burada

css var

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); 
} 

Teşekkürler!

Answer 1

Eğer svg tuval öğenizden sonra olduğundan, hiç z-index'a sahip olmanıza gerek yoktur.

Sorun, position numaralı özelliğin doğru ayarlanmadığından kaynaklanmaktadır. Bir stil özelliği olarak bir özellik olarak ayarlanır.

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>