我正在尝试在 SVG 组件中包含一些 HTML 画布渲染图表。
但是，foreignObject 渲染在 Chrome 和 Safari 中无法正常工作。Chrome、Edge 和 Safari 中的问题是渲染对象显示在任何重叠的 SVG 元素之上。
设置 z-index 并没有什么不同。
html
<foreignObject x="0" y="0" width="200px" height="100px">
<div class="container" xmlns="http://www.w3.org/2000/xmlns/">
<div class="inner">
<canvas></canvas>
</div>
<div class="overlap-test"></div>
</div>
</foreignObject>
css
.chart-container foreignObject {
.container {
width: 100%;
height: 100%;
background: rgb(24, 24, 24);
border-radius: 5px;
overflow: hidden;
position: fixed; // fix for relative position on safari
.inner {
position: absolute;
top: 15px;
left: 15px;
width: 180px;
height: 80px;
background-color: rgb(100, 92, 81);
canvas {
width: 100%;
height: 100%;
}
}
.overlap-test {
position: absolute;
top: 5px;
left: 5px;
width: 80px;
height: 80px;
background: green;
}
}
}
和测试代码
const elm = this.elm.querySelector(`canvas`) as HTMLCanvasElement;
if (elm) {
const ctx = elm.getContext('2d');
setTimeout(() => {
ctx.fillStyle = 'orange';
ctx.fillRect(100, 100, 150, 30);
}, 1000);
}