4

I am designing a UI that uses jointjs to draw a graph.

I need to change the background color of the Paper but I see that changing the .viewport css (e.g. background-color: #ff0000; ) this doesn't affect the appearance of the svg.

How can I add color in the background of the jointjs Paper?

thanks

theosem
  • 1,174
  • 3
  • 10
  • 22
  • 1
    create a rect the size of the viewport and set it to the colour you want. – Robert Longson Sep 24 '15 at 14:08
  • @RobertLongson thanks for the answer. I don't see this as a clean approach, meaning that I should then keep track of another cell in case of resize etc. Are you sure there is no other way to do this? thanks – theosem Sep 24 '15 at 14:11

3 Answers3

3

When initializing paper, add background option to paper 

var paper = new joint.dia.Paper({
    background: {
       color: '#ff0000'
    }                                                                         
});

You can find more info at Jointjs paper documentation.

mtomic
  • 31
  • 3
  • 1
    To add to this, you can dynamically change the background after creation using `paper.drawBackground({ color: 'your_color' });`. See https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Paper.prototype.drawBackground. – chipit24 Nov 07 '18 at 14:45
1

The paper is just a normal HTML <div> element so you can set the background-color: #ff00000 on that <div> element rather than on the internal .viewport SVG <g> element.

dave
  • 4,353
  • 2
  • 29
  • 25
  • thanks. I had this approach in my first implementation but it has problems. For example, in case of window resizing the div get a relative size, while the svg will stay at the exact, defined, size that in cases go out of the space of div. – theosem Sep 29 '15 at 11:26
1

I changed the svg element style in css to change the paper background color and it works for me. Here is an example. 

svg {
    background-color: blue;
}
Melissa Pérez Cadavid
  • 73
  • 1
  • 5