Cytoscape.js - nœuds personnalisés

Question

J'ai compris qu'il est possible de créer des styles de nœuds personnalisés en tant qu'images SVG, puis de les définir comme image de fond des nœuds, mais pour une raison quelconque, cela ne fonctionne pas pour moi. Voici mon 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)' 
    } 
    } 
]; 

Merci à l'avance :)

Answer 1

Si votre fichier SVG ne se charge pas, l'image SVG n'est pas valide ou ne spécifie pas les dimensions.

Answer 2

mettre le svg (données uri) dans vos données {..} et background-image réglée sur les données (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 

    }])