我尝试使用Cytoscape.js创建一个由学生输入生成的化学React图，但似乎无法在每个节点上显示分子的图像。
我需要的图像是用RDKit.js自动生成的。
这些图像可以在cytoscape之外很好地显示（例如，当嵌入到一个普通的HTML文档中时），但是我不能让这些图像在cytoscape图节点上正确显示，特别是当我尝试使用RDKit svg作为节点的背景图像时，它不会显示。
Here's a live example of what I've tried so far，修改自其他一些关于在cytoscape中使用svg图像的指南。
Example diagram image
下面是节点数据的代码：

[
  {
    "data": {
      "id": "id0"
    },
    "position": {
      "x": 44,
      "y": 93
    },
    "style": {
      "background-image": "data:image/svg+xml;utf-8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M12,11.5A2.5,2.5%200%200,1%209.5,9A2.5,2.5%200%200,1%2012,6.5A2.5,2.5%200%200,1%2014.5,9A2.5,2.5%200%200,1%2012,11.5M12,2A7,7%200%200,0%205,9C5,14.25%2012,22%2012,22C12,22%2019,14.25%2019,9A7,7%200%200,0%2012,2Z%22%20fill=%22yellow%22%3E%3C/path%3E%3C/svg%3E",
      "background-fit": "cover cover",
      "background-image-opacity": 1
    }
  },
  {
    "data": {
      "id": "id1"
    },
    "position": {
      "x": 77,
      "y": 93
    },
    "style": {
      "background-image": "benzene.svg",
      "background-fit": "cover cover",
      "background-image-opacity": 1
    }
  },
  {
    "data": {
      "id": "id2"
    },
    "position": {
      "x": 77,
      "y": 150
    },
    "style": {
      "background-image": "data:image/svg+xml;utf-8,data:image/svg+xml;utf-8,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' baseProfile='full' xmlns='http://www.w3.org/2000/svg' xmlns:rdkit='http://www.rdkit.org/xml' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' width='250px' height='200px' viewBox='0 0 250 200'%3E%3C!-- END OF HEADER --%3E%3Crect style='opacity:1.0;fill:%23FFFFFF;stroke:none' width='250.0' height='200.0' x='0.0' y='0.0'%3E%3C/rect%3E%3Cpath class='bond-0 atom-0 atom-1' d='M 230.0,100.0 L 177.5,190.9' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-0 atom-0 atom-1' d='M 211.8,100.0 L 168.4,175.2' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-1 atom-1 atom-2' d='M 177.5,190.9 L 72.5,190.9' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-2 atom-2 atom-3' d='M 72.5,190.9 L 20.0,100.0' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-2 atom-2 atom-3' d='M 81.6,175.2 L 38.2,100.0' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-3 atom-3 atom-4' d='M 20.0,100.0 L 72.5,9.1' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-4 atom-4 atom-5' d='M 72.5,9.1 L 177.5,9.1' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-4 atom-4 atom-5' d='M 81.6,24.8 L 168.4,24.8' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath class='bond-5 atom-5 atom-0' d='M 177.5,9.1 L 230.0,100.0' style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' /%3E%3Cpath d='M 227.3,104.5 L 230.0,100.0 L 227.3,95.5' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 180.1,186.4 L 177.5,190.9 L 172.2,190.9' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 77.8,190.9 L 72.5,190.9 L 69.9,186.4' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 22.7,104.5 L 20.0,100.0 L 22.7,95.5' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 69.9,13.6 L 72.5,9.1 L 77.8,9.1' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3Cpath d='M 172.2,9.1 L 177.5,9.1 L 180.1,13.6' style='fill:none;stroke:%23000000;stroke-width:2.0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;' /%3E%3C/svg%3E",
      "background-fit": "cover cover",
      "background-image-opacity": 1
    }
  }
]

此关系图中有三个节点;第一个节点（左上角的“id 0”）使用了另一个教程中的SVG示例，它的显示与预期一致。
第二个节点（“id 1”，右上角）显示RDKit生成的化学结构，该结构的图像被保存为单独的svg文件，可以正常工作，但我无法将此方法用于我想要的应用程序。
最后，对于第三个节点（“id 2”，右下角），我已经尝试过编码和嵌入svg并直接使用它，就像第一个例子一样。第二个和第三个节点应该是相同的！相反，第三个节点上根本没有图像。
我试过从svg中删除多余的头信息（只留下宽度，高度，版本和xmlns），我试过改变头的宽度和高度来匹配示例svg，我甚至试过通过各种优化器运行svg，但都没有用。