SVG 图像不会在 Internet Explorer 11 的 echarts 工具箱中呈现答案

【问题标题】：SVG image doesn't render in echarts toolbox in Internet Explorer 11SVG 图像不会在 Internet Explorer 11 的 echarts 工具箱中呈现
【发布时间】：2018-12-20 00:30:12
【问题描述】：

我正在使用百度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')
            }
        }
    }
}
};

谁能帮帮我。

【问题讨论】：

IE11 绝对支持 SVG，尽管它有一个渲染错误，导致在某些情况下不遵守 CSS 宽度和高度规则。 IE 是否有可能以兼容模式呈现您的网站？打开 IE 的开发者工具，然后先排除它。
不是。兼容模式已关闭。

标签： javascript internet-explorer svg echarts

【解决方案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 中的示例：

【讨论】：

谢谢。使用路径而不是图像似乎是唯一的选择。