Question

最初，我正在为我的所有元素使用一个SVG文件，但它已经变大到需要大约10秒加载的程度。

因此，我想将该代码拆分为多个SVG文件，以便我可以防止一次性加载它。

我已经尝试了这个并且能够正确加载它们，但我正在努力解决我应该如何在CSS中正确地格式化它们以便它们在点击和显示时都能正常运行。

以下是一些供参考的代码 -

HTML：

<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>

JS：

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);  
});

CSS：

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%;
}

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

我也认为将两个类的宽度和高度设置为100％可能存在问题。我喜欢它在页面内正确定位，所以我不确定如何改变它。有没有人以前处理过这个问题？

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

0 个答案: