Firefox 在使用 insertVertex 作为子项创建 SVG 时额外创建了 rect 覆盖顶点

问题描述

我正在使用 mxGraph (javascript) 库来创建图表。我正在尝试将一个 CSV 顶点作为子节点插入到现有的父顶点中。我将 pointer-events: none; 添加到新创建的顶点以允许被覆盖的形状移动。在 Chrome 或 Safari 上一切正常，添加了图像，但在 Firefox 上创建了额外的 <rect>，它用 <image> 覆盖 pointer-events: none; 并且它没有 pointer-events: none; 属性但是 pointer-events: fill; 因此无法移动父形状。

有谁知道这里发生了什么以及如何避免这种情况？
我已经完成了以下步骤。


//create new svg
const someSvgImage = (color) => (`<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="3" y="3" width="10" height="10" rx="16" stroke="${color}"/>
    </svg>`);

const color = '#9FCBFF';

const testimage = new mxImageBundle();
nodImage.putimage('mySvgImage','data:image/svg+xml,' + someSvgImage(color));
this.graph.addImageBundle(testimage);

graph.insertVertex(
        parent,null,'someValue',100,'shape=image;fillColor=transparent;pointerEvents=false;image=mySvgImage',true
      );

Chrome 和 Firefox 上的结果：（在 Chrome 上一切正常，在 Firefox 上形状被覆盖且不可移动）

The result on Chrome

The result on Firefox

如果您提供任何提示，我将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript mxgraph svg svg svg