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（数据 uri）放入您的数据{..}并将背景图像设置为数据（svg）

风格

{
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 图像无效或未指定尺寸。

Cytoscape.js - 自定义节点

Cytoscape.js - custom nodes

javascript

svg