echarts拓扑图的节点自定义，火狐浏览器兼容问题

Question

echarts的拓扑图节点采用本地svg自定义
使用image://${process.env.BASE.URL}image/svg名字
谷歌浏览器可以正常显示，火狐浏览器不能显示

Answer 1

可能是因为火狐浏览器对于 SVG 图片的显示支持有些问题。你可以尝试以下几种方法解决该问题：

1. 检查 SVG 图片的路径是否正确，是否在 BASE.URL 指定的路径下。
2. 尝试使用完整的 URL 路径，例如 "http；//example.com/image/svg-name.svg"。看是否能够在火狐浏览器中正常显示。
3. 采用其他方式加载 SVG 图片，例如使用 data URI 方式。你可以使用以下代码将 SVG 图片转为 data URI 格式：

const svgUrl = `${process.env.BASE.URL}image/svg-name.svg`;
const response = await fetch(svgUrl);
const svgText = await response.text();
const svgDataUri = `data:image/svg+xml;base64,${window.btoa(svgText)}`;

然后在拓扑图节点的 symbol 属性中使用该 data URI：

domain2node.symbol = `image://${svgDataUri}`;

这样可以保证 SVG 图片能够在所有浏览器中正常显示。