我正在尝试在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);
}
答案 0 :(得分:0)
我不了解Safari,但Chrome小组了解以下信息:
https://bugs.chromium.org/p/chromium/issues/detail?id=842668#c26
有人告诉我要跟踪this bug进行修复。