1

我有一个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"除了附加到的ids（即此处）之外<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>
4

1 回答 1

2

最后我发现了问题。这是一个巨大的头痛和一个大问题。

当您收到此类 svg 图标问题时，请检查您id的 s 附加到s<path>和ids 附加到<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>

这两个ids 应该匹配并且不与其他 svg 重复。

于 2019-06-11T14:00:04.493 回答