Chrome 和 Safari 中的 SVG foreignObject 渲染问题答案

【问题标题】：SVG foreignObject render issue in Chrome and SafariChrome 和 Safari 中的 SVG foreignObject 渲染问题
【发布时间】：2020-09-08 18:24:45
【问题描述】：

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

【问题讨论】：

标签： html svg foreignobject

【解决方案1】：

我不了解 Safari，但 Chromium 团队知道这一点：

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

我被告知要跟踪 this bug 以进行修复。

【讨论】：