Svg 在cytoscape后台节点中设置字体系列时出现问题

上下文：在cytoscape中使用svg作为背景节点

问题：无法设置自定义字体系列

细胞景观样式定义（ts）

mySVG文件（svg）

尝试：

• 使用诸如“草书”之类的默认字体系列
• 将svg从cytoscape中与“Roboto”一起使用是可行的

---

SVG在图像上下文中使用时必须是自包含的，因此必须将字体转换为数据URL

const cytoStyle = {
    selector: 'node',
    style: {
      'background-image': mySVG,
       height: '40px',
       width: '40px',
    },
  },

const cytoStyle = {
    selector: 'node',
    style: {
      'background-image': 'url("images/mySVG.svg")',
       height: '40px',
       width: '40px',
    },
  },

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
  <text font-size="10" font-family="Roboto" font-weight="500">
      <tspan>Activation</tspan>
  </text>
</svg>

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/roboto-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
    url('./fonts/roboto-v15-latin-regular.eot#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('./fonts/roboto-v15-latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */ url('./fonts/roboto-v15-latin-regular.woff') format('woff'),
    /* Modern Browsers */ url('./fonts/roboto-v15-latin-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */ url('./fonts/roboto-v15-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}