SVG加载不出来描述 | 创作者训练营第二期-一一网

前言

在线音乐戳我呀！
音乐博客源码上线啦！
在业务需求中，有时候我们会首选SVG作为图像。
但使用中遇到SVG加载不出来的情况，接下来全面介绍一下事情的起因。

宝贝第一次做美食，脆脆哒~

目前存在的问题？

页面中“SVG加载不出来”

下面我们分析为什么会存在该问题。

为什么会出现此问题？

有一个需求，有一个弹框A是用v-show，按钮A点击来决定弹框A是否显示，系统一进入就要模拟点击弹框A里面的列表A，这个列表A点击会出现一个svg，而模拟点击列表A，svg并不会加载出来。

即：模拟点击左侧菜单树（列表A），显示右侧概化图（SVG）

结果：并不会加载出来。

PS：右侧概化图则是SVG画出来的。

对此进行分析：

因为弹框A作为外层容器，这个时候弹框A还没有显示，你模拟点击列表A，svg是不能计算比例的（因为v-show的原因，你可以获取到列表A元素）

解决方案

既然一定要让外层容器弹框A显示，svg才可以计算比例。那我就不进入系统的时候马上模拟点击，而是在点击按钮A的时候，先让弹框A显示后，再模拟点击列表A。（最后的效果其实都是点击弹框A能马上看到svg，在哪里执行效果都是一样的）

代码如下

// custom-tree-node就是列表A，被点击

showPopup(data) {
    this.show = true	// 让弹框A显示
    // 首加载珠江片下的第一个流域的概化图（模拟点击）
    document.querySelectorAll('.custom-tree-node')[1].click()
}
复制代码