Cytoscape.js: Node Background Image Issue

1.6k views Asked by At

i have issues setting an svg image as background of a node. When i start dragging it, it always rescales the image in Chrome (even with fixed background height) and firefox doesnt even show it.

I have tested lots of properties to solve it and didnt get it.

var cy = cytoscape({
  container: document.getElementById('cy'),
  style: [{
    selector: "node",
    style: {
       'background-image': 'https://cdn.rawgit.com/energiekollektiv/saiv/dev/images/icons/demand.svg',
       'background-width-relative-to': 'inner',
       'background-height-relative-to': 'inner',
       'background-width': '20px',
       'background-height': '20px'
    }
  }]
})

data.forEach(function(node) {
   cy.add({
     group: "nodes"
   })
})
cy.makeLayout({name: "circle"}).run()

You can have a look at it here:

http://jsbin.com/wuzukogemu/6/edit?js,output

0

There are 0 answers