Html 使用Snap.load加载多个SVG会相互冲突

最初，我对所有元素都使用一个SVG文件，但它已经变得很大，加载大约需要10秒

因此，我希望将该代码拆分为多个SVG文件，以便防止一次加载所有SVG文件

我尝试过这样做，并且能够正确地加载它们，但我正在努力解决如何在CSS中正确地格式化它们，以便在单击和显示它们时它们都能正常工作

这里有一些代码供参考-

HTML:

CSS:

我曾尝试将位置属性更改为“绝对”或“固定”，但这样做时似乎存在重叠问题（第二个SVG加载在另一个SVG上），并阻止我执行任何单击操作

我还认为将两个类的宽度和高度设置为100%可能会有问题。我有这样的页面内的正确定位，所以我不知道我会如何改变它。

---

以前有人处理过这个问题吗

不清楚，你“需要”潜水舱吗？难道不能像以前一样只使用一个svg吗？然后加载每个并附加（可能放入一个组中进行定位）可能一个JSFIDLE示例会很好。@Ian如果我要删除div，我是否仍然需要在SVG上应用CSS代码进行定位？你能解释一下你所说的“分组”是什么意思吗

<div class = "groupView">
    <svg viewBox='0 0 1800.9 1000.5' id='GroupView' preserveAspectRatio="none" height="100%" width="100%" x="0px" y="0px"></svg>
</div>

<div class = "statusIcons">
    <svg viewBox='0 0 1000 1000' id='StatusIcons' preserveAspectRatio="none" height="100%" width="100%" x="100px" y="100px">
        <circle id="MRLED0_0" class="" cx="169.9221" cy="142.224" r="3.4"/>
    </svg>
</div> 

var groupView = Snap('#GroupView');

Snap.load("/svg/GroupView.svg", function(f) {
    groupView.append(f);
});

var machBox = Snap('#MachBox');

Snap.load("/svg/MachBox.svg", function(g) {
    machBox.append(g);  
}); 

div.groupView{
    top: 0;
    left: 0;
    position: absolute;   /*relative  */
    width: 100%;
    height: 100%;
} 

div.machBox{
    top: 0;
    left: 0;
    position: relative;
    width: 100%;
    height: 100%;
}