SVG缓慢加载

Question

我使用自定义功能动态地将SVG添加到我的网页：

    function appendSVGImageButton(parent, child, x, y, w, h, colour, svg, target){

        var url = svgURL + svg + '.svg';

        //create holder
        var holderID = child+"_holder";
        var holderDiv = $("<div id='"+holderID+"' class='noselect' style='left:"+x+"px; top:"+y+"px; width:"+w+"px; height:"+h+"px; position:absolute; background-color:"+colour+"; overflow:hidden;'></div>");
        $("#"+parent).append(holderDiv);

        //create svg
        var svgID = child+"_svg";
        var svgObj = $("<object  data='"+url+"' type='image/svg+xml' style='left:0px; top:0px; width:"+w+"px; height:"+h+"px; position:absolute;'></object>");
        $("#"+holderID).append(svgObj);

        //create button
        var buttonID = child+"_button";
        var buttonDiv = $("<div id='"+buttonID+"' class='noselect' style='left:0px; top:0px; width:"+w+"px; height:"+h+"px; position:absolute; cursor: pointer;'></div>");
        $("#"+holderID).append(buttonDiv);
        var div = document.getElementById(buttonID);    
        div.addEventListener('click', target);

    }

我的主文件中这样称为：

appendSVGImageButton('productView', 'closeProductView', 19 * bD, 0, bD, bD, 'white', 'closeBig', closeProductView);

但是当我在页面上布置各种内容时，SVG会在其余内容之后加载一秒钟。以下是SVG的示例：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 28.3 28.3" style="enable-background:new 0 0 28.3 28.3;" xml:space="preserve">
    <style type="text/css">
        @import url("http://www.example.com/temp/wp-content/themes/new/style.css");
    </style>
<g id="blue">
    <line class="st6" x1="6.8" y1="21.5" x2="21.5" y2="6.8"/>
</g>
<g id="red">
    <g>
        <line class="st18" x1="21.5" y1="21.5" x2="6.8" y2="6.8"/>
    </g>
</g>
<g id="white_only_in_heart">
</g>
</svg>

我想知道@import是否会减慢业务量？我最初在样式标签中定义了类，但它仍然很慢。有什么想法吗？

编辑：

Answer 1

我不确定但您可以尝试使用dataURL。我从你的svg中删除了导入样式并将其转换为dataURL：

"<object  data='"+url+"'...

现在，在你正在做的地方：

url

将{{1}}替换为我提供的数据网址。您需要单独加载样式。有什么改变吗？