Question

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

我只需要在canvas元素上添加一个透明的svg元素，但每当我追加时，无论我尝试使用position和z-index，svg都会在画布下进行。

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

这里是css：

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

和javascript for canvas：

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>

将svg元素放在另一个元素之上

1 个答案: