Cytoscape.js - 自定义节点

Question

我知道可以创建自定义节点样式作为SVG图像，然后将其设置为节点的背景图像，但由于某种原因它不适合我。 这是我的代码：

var cytoscapeStyle = [ // the stylesheet for the graph     
  {
    selector: 'node',
    style: {
      'background-color': 'white',
      'border-width': '6px',
      'label': 'data(id)',
      'background-image': 'node.svg', //doesn't work for some reason. Works when I use a png (e.g. node.png)
      'shape': 'roundrectangle',
      'width': '200px',
      'height': '90px'
    }
  },

  {
    "selector": "node:selected",
    "style": {
      "border-width": "6px",
      "border-color": "#AAD8FF",
      "border-opacity": "0.5",
      "background-color": "#77828C",
      "text-outline-color": "#77828C"
    }
  },

  {
    selector: 'edge',
    style: {
      'width': 3,
      'line-color': '#ccc',
      'target-arrow-color': '#ccc',
      'target-arrow-shape': 'triangle',
      'label': 'data(id)'
    }
  }
];

提前致谢 ：）

Answer 1

将svg（Data uri）放入数据{..}并将background-image设置为data（svg）

stylestuff

{
selector: 'node',
style: {
  'background-image': 'data(svg)'
}

nodestuff

cy.add([
  {
    group: "nodes",
    data: { id: "somenode",
            svg: <image> //eg. "data:image/svg+xml;base64,<data>" 
                         //     or http://some.image.xyz

    }])

Answer 2

如果您的SVG未加载，则SVG图像无效或未指定尺寸。