echarts加载svg图片原本颜色丢失

Question

在使用echarts加载svg图片时出现了颜色丢失的问题。
这个是echarts的Java代码

function test2(id) {
    let myChart = echarts.init(document.getElementById(id), null,{
        height: 500,
        width: 'auto',
    });
    let option;
    $.get('static/image/test1.svg', function (svg) {
        echarts.registerMap('test1', { svg: svg ,itemStyle: {opacity: 1}});
        option = {
            tooltip: {
            },
            geo: {
                // left: 10,
                // right: '50%',
                map: 'test1',
                selectedMode: 'single',
                emphasis: {
                    focus: 'self',
                    itemStyle: {
                        color: null
                    },
                    label: {
                        position: 'bottom',
                        distance: 0,
                        textBorderColor: '#fff',
                        textBorderWidth: 2
                    }
                },
                blur: {},
                select: {
                    // itemStyle: {
                    //     color: '#b50205'
                    // },
                    label: {
                        show: false,
                        textBorderColor: '#fff',
                        textBorderWidth: 2
                    }
                }
            },
            grid: {
                left: '60%',
                top: '20%',
                bottom: '20%'
            },
        };
        myChart.on("mouseover", function (params) {
            myChart.dispatchAction({
                type: "downplay",
            });
        });
        myChart.setOption(option);
    });
    option && myChart.setOption(option);
}

这是svg图片的代码

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#98D000;}
    .st1{fill:#0E00FF;stroke:#000000;stroke-miterlimit:10;}
</style>
<g id="图层_1" name="named_rect1">
    <g>
        <rect   x="171.5" y="180.5" class="st0" width="742" height="451"/>
        <path d="M913,181v450H172V181H913 M914,180H171v452h743V180L914,180z"/>
    </g>
    <polygon  class="st1" points="1346.17,821.34 1211.34,782.47 1102.89,871.51 1098.19,731.27 979.99,655.64 1111.92,607.83
        1147.32,472.05 1233.56,582.75 1373.63,574.46 1295,690.68     "/>
</g>
<g id="图层_3">
    <rect name="named_rect2" x="996.5" y="91.5" class="st1" width="518" height="289"/>
    <polygon name="named_rect3" class="st1" points="618.73,947.37 491.62,967.78 410.39,867.91 456.27,747.63 583.38,727.22 664.61,827.09     "/>
    <polygon name="named_rect4" class="st1" points="230.75,854.94 162.94,871.51 114.69,821.07 134.25,754.06 202.06,737.49 250.31,787.93     "/>
</g>
</svg>

图片在浏览器和idea中可以正常显示，有颜色
但是通过echarts渲染出来后都变成黑色了
我应该修改哪里才能让图片显示原来的颜色和透明度呢呢

Answer 1

你可以尝试吧svg的class直接内联写在标签里面，可能st0 st1这种被echart的样式替代了。你都试试，换个名字，或者直接内联