将svg元素放置在另一个元素顶部的较高位置

Position svg element higher on top of another element

本文关键字：元素 高位置 位置 顶部 svg 另一个      更新时间：2023-09-26

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

我只需要在画布元素上添加一个透明的svg元素，但无论何时添加，svg都会在画布下，无论我尝试如何定位和z索引。

提前感谢您的帮助，很抱歉我的新手问题，我是编码新手。以下是我认为合适的代码：

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

谢谢！

您根本不需要z-index，因为svg在您的画布元素之后。

问题在于属性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>

相关文章：