$ .each + $ .get / $。ajax无法获得正确的数据

Question

我有一个元素数组，需要迭代data-src。 我将通过源URL请求每个图像的svg图标数据。 然后将img替换为svg。

我已经尝试了$ .get和$ .ajax。它们以相同的时髦方式工作。

$($('#container img').each(function(){
    var $img = $(this);
    var imgURL = $img.data('src');

    $.ajax({url: imgURL}).done(function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = $(data).find('svg');

        // Remove any invalid XML tags as per http://validator.w3.org
        $svg = $svg.removeAttr('xmlns:a');

        // Replace image with new SVG
        $img.replaceWith($svg);
    });
}));

我希望每个img应该替换为svg。 有6种不同的图像元素需要迭代。但是它只能渲染3种类型的图像-其他3种是重复的图像。

修改

根据需要，我添加了重复3次的svg图标的HTML。除了附加到id="icon/general/path"的id（即此处的<g>）之外，其他所有内容都是相同的。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80px" height="80px" viewBox="0 0 30 30" version="1.1">
    <title>icon/general/path</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M23.35,17.85 C26.1811218,17.9531502 28.4064642,20.3075624 28.35,23.14 C28.4175618,25.9801499 26.1890783,28.3467994 23.35,28.45 L8.5,28.45 L3.5,22.7 C0.861206245,19.9120615 0.861206245,15.5479385 3.5,12.76 C4.82392582,11.4296085 6.62310903,10.6811483 8.5,10.68 L8.58,10.68 C10.456891,10.6811483 12.2560742,11.4296085 13.58,12.76 C16.2517576,15.5579617 16.2517576,19.9620383 13.58,22.76 L10.72,26 L23.35,26 C24.8381231,25.9193249 25.9794604,24.6481884 25.9,23.16 C25.9624275,21.6832523 24.8258567,20.4307959 23.35,20.35 L19.73,20.35 C17.8398194,20.249715 16.3586134,18.6878391 16.3586134,16.795 C16.3586134,14.9021609 17.8398194,13.340285 19.73,13.24 L21.07,13.24 L21.07,15.74 L19.73,15.74 C19.2152683,15.8271071 18.8385357,16.2729498 18.8385357,16.795 C18.8385357,17.3170502 19.2152683,17.7628929 19.73,17.85 L23.35,17.85 Z M5.35,21.07 L8.52,24.68 L11.71,21.08 C13.4566172,19.2589987 13.4829132,16.3927401 11.77,14.54 C10.9228684,13.6811215 9.76635871,13.1983418 8.56,13.2 L8.5,13.2 C7.31447448,13.2142619 6.18247682,13.6958101 5.35,14.54 C3.62163028,16.3735661 3.62163028,19.2364339 5.35,21.07 Z M23.11,8 C22.7594008,8.01423712 22.4175606,7.88829599 22.16,7.65 C21.6579442,7.14330328 21.6579442,6.32669672 22.16,5.82 C22.4038589,5.57573672 22.7348454,5.438477 23.08,5.438477 C23.4251546,5.438477 23.7561411,5.57573672 24,5.82 C24.2451774,6.04938214 24.3920996,6.36472746 24.41,6.7 C24.41,7.41797017 23.8279702,8 23.11,8 Z M23.09,15 L19.4,10.61 C17.4037602,8.50077083 17.4037602,5.19922917 19.4,3.09 C20.4010694,2.083572 21.76049,1.51534855 23.18,1.51 C24.6131548,1.50581957 25.9885201,2.07468792 27,3.09 C29.0025573,5.20057413 29.0025573,8.50942587 27,10.62 L23.09,15 Z M21.09,4.87 L21.09,4.85 C19.9927338,6.02355371 20.014778,7.85322326 21.14,9 L23.08,11.24 L25.08,9 C26.1812291,7.84509836 26.1856235,6.0302209 25.09,4.87 C23.9805846,3.77719207 22.1994154,3.77719207 21.09,4.87 Z M8.53,19.41 C7.79081922,19.4051708 7.12628916,18.9584612 6.8427573,18.2758037 C6.55922544,17.5931462 6.71174316,16.8070877 7.23,16.28 C7.81627484,15.6837354 8.73089122,15.5577824 9.45651146,15.9733844 C10.1821317,16.3889863 10.5362598,17.2416179 10.3185891,18.049002 C10.1009183,18.8563862 9.36619368,19.415463 8.53,19.41 Z" id="path-1"></path>
    </defs>
    <g id="icon/general/path" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <use id="Mask" fill="#282B3E" fill-rule="nonzero" xlink:href="#path-1"></use>
        <g id="?-color/navy" mask="url(#mask-2)" fill="#282B3E" fill-rule="nonzero">
            <rect id="?-navy" x="0" y="0" width="30" height="30"></rect>
        </g>
    </g>
</svg>

Answer 1

最后我找到了问题。这是一个巨大的头痛和巨大的陷阱。

当您收到此类svg图标问题时，请检查Future imageLoader(String string) async { var url = await FirebaseStorage.instance.ref().child(string).getDownloadURL(); setState(() { return url; }); } 上的id和<path>上的id。如果两个svg图标具有相似的<use>，浏览器将在渲染时陷入混乱。

示例：

id

这两个 <use xlink:href="#this-is-an-id"></use> <path id="this-is-an-id" d="M26.49,11.12 C26.0489971,10.6778532 25.5472977,10.3007368 25,10 C26.4207058,8.2568355 26.2583413,5.71339469 24.6275155,4.16502949 C22.9966898,2.61666429 20.4482519,2.58637082 18.7810811,4.0955325 C17.1139103,5.60469418 16.891132,8.14355676 18.27,9.92 C17.6829359,10.2428405 17.1443048,10.6468138 16.67,11.12 C16.54,11.25 16.43,11.38 16.31,11.52 C15.9146003,11.3994287 15.5033725,11.3387557 15.09,11.34 C14.6310591,11.3397875 14.1751279,11.4140874 13.74,11.56 C13.61,11.41 13.49,11.26 13.35,11.12 C12.917759,10.6806178 12.4263607,10.3036547 11.89,10 C12.5295115,9.24112576 12.8832918,8.28238099 12.89,7.29 C12.89,4.91517558 10.9648244,2.99 8.59,2.99 C6.21517558,2.99 4.29,4.91517558 4.29,7.29 C4.29034903,8.24382058 4.61078987,9.16992984 5.2,9.92 C4.60977319,10.2426109 4.06780776,10.6465602 3.59,11.12 C2.2966495,12.421322 1.57664645,14.1853294 1.59,16.02 L1.58981751,27 L4,27 L4,16 C3.99795222,14.2053752 5.07884187,12.5868164 6.73729328,11.9010895 C8.39574469,11.2153626 10.3040615,11.5979614 11.57,12.87 C11.6091189,12.9076809 11.6458565,12.9477583 11.68,12.99 C10.4790363,14.5376802 10.4790363,16.7023198 11.68,18.25 C11.0929359,18.5728405 10.5543048,18.9768138 10.08,19.45 C8.7866495,20.751322 8.06664645,22.5153294 8.08,24.35 L8.08,27 L10.58,27 L10.58,24.37 C10.58,21.9233786 12.5633786,19.94 15.01,19.94 C17.4566214,19.94 19.44,21.9233786 19.44,24.37 L19.44,27 L21.94,27 L21.94,24.37 C21.9533535,22.5353294 21.2333505,20.771322 19.94,19.47 C19.505128,19.0293725 19.0102482,18.6523213 18.47,18.35 C19.7706102,16.7698818 19.7706102,14.4901182 18.47,12.91 C19.7342932,11.6710436 21.614778,11.3036598 23.2524116,11.9756767 C24.8900451,12.6476936 25.9704202,14.2300917 26,16 L26,27 L28.5000297,27 L28.5,16 C28.505367,14.1708117 27.7820861,12.4147865 26.49,11.12 Z M21.69,5.49 C22.6841125,5.49 23.49,6.29588745 23.49,7.29 C23.49,8.28411255 22.6841125,9.09 21.69,9.09 C20.6958875,9.09 19.89,8.28411255 19.89,7.29 C19.89,6.29588745 20.6958875,5.49 21.69,5.49 Z M16.91,15.64 C16.91,16.6341125 16.1041125,17.44 15.11,17.44 C14.1158875,17.44 13.31,16.6341125 13.31,15.64 C13.31,14.6458875 14.1158875,13.84 15.11,13.84 C16.1018401,13.8454648 16.9045352,14.6481599 16.91,15.64 Z M8.56,5.49 C9.55411255,5.49 10.36,6.29588745 10.36,7.29 C10.36,8.28411255 9.55411255,9.09 8.56,9.09 C7.56588745,9.09 6.76,8.28411255 6.76,7.29 C6.76,6.29588745 7.56588745,5.49 8.56,5.49 Z" ></path> 应该匹配，并且不能与其他svg复制。