$ .each + $ .get / $. ajax не получает правильные данные

Question

У меня есть массив элементов с data-src Мне нужно итерировать.Я буду запрашивать данные значка SVG для каждого изображения по URL-адресу источника.А затем замените 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 дублированы.

Редактировать

По мере необходимости я добавляю HTML-код значка svg, которыйдублируется 3 раза.За исключением идентификаторов (то есть id="icon/general/path" здесь), прикрепленных к <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, пожалуйста, проверьте ваши id подключенные к <path> и id присоединенные к <use>.Если две иконки svg имеют одинаковые id s, браузер будет испорчен при рендеринге.

пример:

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

Эти две id должны совпадать ине дублируются с другими svgs.