Cytoscape.js - 自定义节点

Question

I understood that it's possible to create custom node styles as SVG images and then set it as the nodes' background image, but for some reason it doesn't work for me. Here's my code:

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)'
    }
  }
];

Thanks in advance :)

Answer 1

put the svg (Data uri) in your data{..} and set background-image to 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图像无效或未指定尺寸。