javascript - SVG 图像无法在 Internet Explorer 11 的 echarts 工具箱中呈现

Question

我正在使用百度echarts图表库创建一个工具箱。我通过传递指向 svg 图像的链接来设置用户定义工具的图标字段，如下所示 - 'image://<path>' 。这个东西适用于除 IE 之外的所有浏览器。 IE版本为11。
我尝试在 DOM 元素中加载 svg 图像，它在 IE 中工作正常。仅 echarts 有问题。

这就是我的工具箱选项 -

option = {
toolbox: {
    show: true,
    orient: 'vertical',
    itemSize: 20,
    height:10,
    width:10,
    top: 'center',
    right: '10%',
    feature: {
        myButton: {
            show: true,
            title: '...',
            icon: 'image://sample.svg',
            onclick: function (){
                alert('clicked')
            }
        }
    }
}
};

有人可以帮我吗？

Answer 1

我找到解决办法了!!!如果有用就接受我的回答。

IE 不支持直接 svg 文件。它仅支持 svg 路径，不支持任何颜色。所以我们需要使用下面的陡峭来逃避这个问题。

举个例子:

步骤:1 我拍摄了 svg 图像“https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg” 我把它作为我的按钮图标，它在除 IE 之外的所有浏览器中都有效。要使图标在所有浏览器中都有效

第 2 步 打开 svg 文件并仅复制路径。 所以我打算将其转换为路径。我访问了这个网站https://aydos.com/svgedit/

现在我们有了 svg 文件的正确路径。但是我们从该网站复制的路径在坐标之间会有空格，因此我们需要将“空格”替换为“，”。

最后一步 转到:https://convert.town/replace-spaces-with-commas将导出的代码粘贴到左侧。它会自动在坐标之间添加空格。现在您可以在 Echart 中使用该路径，它适用于所有浏览器。

这样就可以正常工作了。

IE 中的示例: