Link area filled in black

Same as issue #568 except using:

• import 'jointjs/dist/joint.css'; - Makes the whole area go blank.
• <link rel="stylesheet" href="%PUBLIC_URL%/joint.css" /> - In index.html makes the whole area go blank
• import 'jointjs/css/themes/default.css'; - only fixes the arrow head colour. But the nodes still show

Is there something I’m missing here about using jointjs with jsx?

[kumilingus]

The external CSS is not exported when you serialize a DOM node with XMLSerializer. That’s why no. 1 added fill: none as an SVG DOM attribute to every link and no 2. inserted <style> tag inside the exported SVG.

[kumilingus]

You are missing CSS rules (https://github.com/clientIO/joint/blob/master/css/layout.css#L101-L104) in the exported SVG.

1. Add the missing fill: none to .connection-wrap to the shape definition.

 attrs: { 
  text: {
    fill: '#000000',
    fontSize: 10,
    textAnchor: 'middle',
    textVerticalAnchor: 'middle',
    yAlignment: 'bottom',
    pointerEvents: 'cell:pointerdblclick',
    cursor: "move",
  },
  '.connection': {
      'fill': 'none',
      'stroke-linejoin': 'round',
      'stroke-width': '2',
      'stroke': '#4b4a67', // '#7a7e9b'
  },
  '.connection-wrap': {
     'fill': 'none'
  }
},

1. Export the missing CSS as part of the paper

const linkStyle = V.createSVGStyle(`
  .joint-link .connection-wrap,
  .joint-link .connection {
    fill: red;
  }
`);
paper.svg.prepend(linkStyle);
// export the SVG