fix(svg): fix chart cannot be exported with SVG renderer in IE.

[plainheart]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

1) fix charts cannot be exported when using SVG renderer in IE.

2) fix exported SVG file cannot be opened when using external images.
See #13655

After this fix, exporting SVG file can even be supported in IE 9.

Fixed issues

• svg image save bug on svg render with external symbol image #13655

Details

Before: What was the problem?

After: How is it fixed in this PR?

Usage

Are there any API changes?

• The API has been changed.

Related test cases or examples to use the new APIs

Please refer to test/ie-svg-export.html.

Others

Merging options

• Please squash the commits into a single one when merge.

Other information

Related PR in zrender ecomfe/zrender#673

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

The pull request is marked to be PR: author is committer because you are a committer of this project.

[pissang]

Also I'm not sure if we should remove the edge condition here https://github.com/apache/incubator-echarts/blob/a3a0e4582b59dd974d349eef8dfde2b6ebe229ab/src/component/toolbox/feature/SaveAsImage.ts#L61 since edge is using chromium now

[plainheart]

I'm not sure if we should remove the edge condition here. edge is using chromium now

@pissang I think we may need to tweak the logic of checking if the browser is Edge in zrender.
Before using chromium core, the latest version of Edge is 18.x(EdgeHTML core version). Now it's increasing from 78.x(Edge Browser Version).

Changes in zrender would be:

// https://github.com/ecomfe/zrender/blob/master/src/core/env.ts#L58
- const edge = ua.match(/Edge\/([\d.]+)/);
+ const edge = ua.match(/Edge?\/([\d.]+)/); // make `e` optional to match new edge with chromium core.

Old UserAgent

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18363

New UserAgent

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 Edg/87.0.664.60

Related commit in zrender is ecomfe/zrender@d53d616

So, the judgment here should be:

// Chrome, Firefox, New Edge
if (typeof MouseEvent === 'function' && (env.browser.newEdge || (!env.browser.ie && !env.browser.edge))) {

The related commit is 177f1fc

[pissang]

I think it looks good to me. Pin @100pah to have a further check.

[100pah]

It looks good to me. @plainheart

[echarts-bot]

Congratulations! Your PR has been merged. Thanks for your contribution! 👍