[Bug] svg rendering part of the area is displayed as black blocks

[peng3693]

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

`
echarts.registerMap('f1', {svg: svg});
var chartDom = document.getElementById('firstMapEcharts');
var myChart = echarts.init(chartDom, null, {renderer: 'svg'});

  var option = {
    geo: {
      map: 'f1',
      roam: false,
      left: "10px",
      top: "10px",
      right: "-450px",
      bottom: "20px",
      layoutSize: '100%',
      selectedMode: 'false',
      emphasis: {
        label: {
          show: false
        }
      }
    }
  };
  myChart.setOption(option);
  myChart.getOption();`

Current Behavior

Using echarts to display the svg map, the color of some areas in the figure is lost and displayed as black blocks

Expected Behavior

This is the original display of the svg image, use html to display this svg image, all colors are displayed normally

Environment

- OS:mac
- Browser:chrome
- Framework:"react": "^18.2.0",

Any additional comments?

No response

[artokhotnikov]

try removing the fill attribute from the element and adding style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none"
it helped me

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!