javascript - 将 svg 元素置于另一个元素之上

Question

我知道这个问题已经在其他地方得到了回答，因为我看过了，但我找不到任何东西似乎可以解决问题，很抱歉发布了一个以前被问过的问题。

我只需要将一个透明的 svg 元素恰好附加到我的 canvas 元素上，但无论我如何尝试定位和 z-index，每当我附加时，svg 都会进入 Canvas 下方。

在此先感谢您的帮助，对于我的新问题，我很抱歉，我是编码新手。这是我认为合适的代码:

这是CSS:

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

和 canvas 的 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，因为您的 svg 位于 Canvas 元素之后。

问题来自属性 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>