Chrome和Safari中的SVG foreignObject渲染问题

如何解决Chrome和Safari中的SVG foreignObject渲染问题

我正在尝试在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);
    }

解决方法

我不了解Safari，但Chrome小组了解以下信息：

https://bugs.chromium.org/p/chromium/issues/detail?id=842668#c26

有人告诉我要跟踪this bug进行修复。