3

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

Donskelle
  • 76
  • 5
  • I don't really understand the problem, seems to work alright – Ovidiu Unguru Sep 04 '17 at 12:09
  • Here are two images of the issue: [Normal Node](https://i.stack.imgur.com/66GVT.png) without Click and [Node on click](https://i.stack.imgur.com/ANpgJ.png) where the background-image gets scalled – Donskelle Sep 05 '17 at 09:32
  • 1
    Changing `'background-image': 'https://cdn.rawgit.com/energiekollektiv/saiv/dev/images/icons/demand_test.png',`(img to png) fixes all Problems. Even tried to recreate svg with lnkscape. No success – Donskelle Sep 05 '17 at 09:58
  • 1
    I see exactly the same problem and using png solved the problem – canbax Mar 22 '19 at 13:08

0 Answers0