我可以在画布元素的顶部放置svg图像/元素吗？

Kurt Liu 发表于 Dev

刘

我正在使用WebGL渲染一些图像并将其放在画布上。我想知道是否可以在该画布上放置svg元素？

实际上，我可以手动移动在画布上绘制的矢量图像。因此，我认为应该有一种方法可以做到这一点。

man

就像您将任意两个元素放在另一个之上一样吗？给他们两个都加上position:relative;或的父母position:absolute;。将第二个（或两个）设置为position:absolute; left: 0px; top:0px; z-index: 2;

<div style="position: relative;">
  <canvas id="c" width="300" height="300"></canvas>
  <img src="http://s.cdpn.io/3/kiwi.svg" 
       style="position: absolute; 
              left: 0px; 
              top:0px;
              z-index: 2;
              width: 300px;
       " />
</div>

例：

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

function rand(r) {
   return Math.floor(Math.random() * r);
}

function draw() {
  ctx.fillStyle ="rgb(" + 
                rand(256) + "," +
                rand(256) + "," +
                rand(256) + ")";
  
  ctx.fillRect(
      -150 + rand(canvas.width), 
      -150 + rand(canvas.height),
      rand(300),
      rand(300));
   requestAnimationFrame(draw);
}
draw();

<div style="position: relative;">
      <canvas id="c" width="300" height="300"></canvas>
      <img src="http://s.cdpn.io/3/kiwi.svg" 
           style="position: absolute; 
                  left: 0px; 
                  top:0px;
                  z-index: 2;
                  width: 300px;
           " />
    </div>

这似乎已经得到了回答，但是这里却相反

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。