javascript - 使用特定 HTML 元素的坐标添加到 DOM 时，DIV 中的 SVG 不显示

Question

我正在创建一个浏览器扩展，我现在正在 Chrome 和 Edge 上对其进行测试。它在网页中的一些单词上放置一个 svg 绘图，根据字体调整其大小。

将带有 svg 的简单 div 添加到 DOM。我把 zIndex= auto 或继承，但我在某个网页上发现了一个奇怪的行为： https ://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript

如果扩展程序在匹配“选项卡”的单词上绘制了图形，那么您在页面顶部可以看到的标题中的第一次出现根本看不到。我检查了开发人员工具，并且 div 像其他人一样存在，只是没有出现。

function createDiv(x,y,size) {
       var scrollX=window.scrollX;
            var scrollY=window.scrollY;
        var div=null;div=document.createElement('div');


            div.className=CLASS_NAME;
            div.style.position = 'absolute';
            var color=COLOR;

            div.style.opacity='0.6';

            div.style.zIndex='auto';

            div.style.top=(scrollY+(y)-size/4)+'px';
             div.style.height=(size)+'px';
             div.style.left=(scrollX+(x))+'px';
             if (scrollX+(x)+size>window.innerWidth) div.style.left=window.innerWidth-size;
             div.style.width=(size)+'px';

             div.innerHTML='<svg ...>';
             div.style.visibility='visible';
        return div;
        };
....
div=createDiv(param1,param2,param3);
document.body.appendChild(div);

（52.71875 118 110 的参数应该匹配第一次出现）

是 zIndex 问题吗？还是另一种 HTML 问题？

标签： javascripthtmlcssbrowsergoogle-chrome-extension