0

I'm trying to export an image using canvg. It works fine on Chrome and Firefox but it doesn't on Internet Explorer, it changes to resulted image. With IE it also needs to be saved as SVG file and exported afterwards.

The snippet where the thing is done:

 const svg = document.getElementsByClassName("rtmchart")[0];
 const canvas = document.createElement('canvas');
 const data = new XMLSerializer().serializeToString(svg);
 const opts = { log: true, ignoreMouse: true, ignoreAnimation: true };
 canvg(canvas, data, opts);
 svgWrapper = $(svg);
 canvasWrapper = $(canvas);
 svgWrapper.hide();
 canvasWrapper.insertAfter(svgWrapper);

css/less:

g.bb-region.forecast-region {
    fill-opacity: 1;
    fill: url(#forecastRegionFilter);
}
#forecastRegionFilter {
    rect {
        fill:skyblue;
        fill-opacity: 0.3;
    }
    line {
        stroke:black;
        stroke-width: 2px;
    }
}

This is how the export looks with Chrome (the same as the original image):

enter image description here

And here is the broken image exported with IE:

enter image description here

Any ideas how to solve this problem?

Leo Messi
  • 5,157
  • 14
  • 63
  • 125
  • Could you please set up an [MCVE], I guess all is required is a rect with this fill rule and the definition of `#forecastRegionFilter` gradient/pattern. Seems like [this might be related](https://stackoverflow.com/questions/33279845/canvg-conversion-weird-behavior-when-using-a-fill-url), though unanswered. – Kaiido Jun 25 '19 at 10:18
  • @Kaiido, I don't think that it can be written as a reproducible example here. – Leo Messi Jun 25 '19 at 10:20
  • And why wouldn't it be possible? You just need to reproduce the situation you are in just before calling canvg and remove everything that is not needed to reproduce the issue as a base for you: https://jsfiddle.net/1b5pj6on/ just edit the pattern so that it matches your element. – Kaiido Jun 25 '19 at 10:30

0 Answers0