Bonjour à tous,
J'ai un problème d'affichage de sprite qui se duplique à l'identique dans ma page voici le code :


<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
    <symbol id="icon-search" width="30px" height="30px" viewBox="0 0 30 30">
        <title>Search</title>
        <defs>
            <path d="M4.23530946,17.2717996 C0.641640902,13.6781311 0.641640902,7.83030588 4.23530946,4.23663732 C5.97805184,2.49586192 8.29318479,1.5379437 10.7519071,1.5379437 C13.2145634,1.5379437 15.5296963,2.49586192 17.2724387,4.23663732 C20.8641403,7.83030588 20.8641403,13.6781311 17.2724387,17.2717996 C15.5296963,19.012575 13.2145634,19.9724602 10.7519071,19.9724602 C8.29318479,19.9724602 5.97805184,19.012575 4.23530946,17.2717996 M26.6846695,25.1658507 L19.0800184,17.5611995 C22.5408507,13.3365973 22.3021726,7.09241126 18.3584761,3.1505508 C16.2581089,1.0501836 13.505967,0 10.751989,0 C7.999847,0 5.24770502,1.0501836 3.14917381,3.1505508 C-1.0497246,7.3494492 -1.0497246,14.1591187 3.14917381,18.3580171 C5.24770502,20.4602203 7.999847,21.5085679 10.751989,21.5085679 C13.1699816,21.5085679 15.5843023,20.7007344 17.5598225,19.0813953 L25.1644737,26.6860465 C25.373776,26.8971848 25.6491738,27 25.9245716,27 C26.1999694,27 26.4753672,26.8971848 26.6846695,26.6860465 C27.1051102,26.2656059 27.1051102,25.5862913 26.6846695,25.1658507" id="path-1"></path>
        </defs>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(2.000000, 2.000000)">
                <mask fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <g id="UX/Primary" mask="url(#mask-2)" fill="#276EF1">
                    <g transform="translate(-15.000000, -15.000000)" id="Primary">
                        <rect x="0" y="0" width="56" height="56"></rect>
                    </g>
                </g>
            </g>
        </g>
    </symbol>

    <symbol id="icon-myaccount" width="26px" height="24px" viewBox="0 0 26 24">
        <title>Account</title>
        <defs>
            <path d="M25.2960035,24 C24.9073974,24 24.5920069,23.6837647 24.5920069,23.2941176 C24.5920069,19.7392941 21.7084371,16.8461176 18.1621719,16.8461176 L7.83688942,16.8461176 C4.29156287,16.8461176 1.40799307,19.7392941 1.40799307,23.2941176 C1.40799307,23.6837647 1.09260262,24 0.703996534,24 C0.315390447,24 -3.55271368e-15,23.6837647 -3.55271368e-15,23.2941176 C-3.55271368e-15,18.9609412 3.51622802,15.4343529 7.83688942,15.4343529 L18.1621719,15.4343529 C22.483772,15.4343529 26,18.9609412 26,23.2941176 C26,23.6837647 25.6846096,24 25.2960035,24 M12.9999061,1.41176471 C10.1266616,1.41176471 7.79033178,3.75435294 7.79033178,6.63529412 C7.79033178,9.51529412 10.1266616,11.8588235 12.9999061,11.8588235 C15.8731507,11.8588235 18.2094805,9.51529412 18.2094805,6.63529412 C18.2094805,3.75435294 15.8731507,1.41176471 12.9999061,1.41176471 M12.9999061,13.2705882 C9.3503881,13.2705882 6.38233871,10.2945882 6.38233871,6.63529412 C6.38233871,2.976 9.3503881,0 12.9999061,0 C16.6494242,0 19.6174736,2.976 19.6174736,6.63529412 C19.6174736,10.2945882 16.6494242,13.2705882 12.9999061,13.2705882" id="path-1"></path>
        </defs>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(-2.000000, -3.000000)">
                <g transform="translate(2.000000, 3.000000)">
                    <mask fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g mask="url(#mask-2)" fill="#ffffff">
                        <g transform="translate(-2.000000, -3.000000)" id="Primary">
                            <rect x="0" y="0" width="30" height="30"></rect>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </symbol>

    <symbol id="icon-panier" width="30px" height="30px" viewBox="0 0 30 30">
        <title>Panier</title>
        <defs>
            <path d="M6.84003483,17.0043817 L21.0701204,17.0043817 C22.6836773,17.0043817 24,15.6880589 24,14.0745021 L24,8.08735677 C24,8.08204901 24,8.07143351 24,8.06612576 C24,8.0502025 24,8.03958699 24,8.02366373 C24,8.01304823 24,8.00243272 23.9946922,7.99181721 C23.9946922,7.98120171 23.9893845,7.96527845 23.9893845,7.95466294 C23.9893845,7.94404744 23.9840767,7.93343193 23.9840767,7.92281643 C23.978769,7.91220092 23.978769,7.90158541 23.9734612,7.88566216 C23.9681535,7.87504665 23.9681535,7.86443114 23.9628457,7.85381564 C23.957538,7.84320013 23.957538,7.83258463 23.9522302,7.82196912 C23.9469225,7.81135362 23.9416147,7.80073811 23.936307,7.78481485 C23.9309992,7.77419934 23.9256915,7.76358384 23.9203837,7.75827609 C23.915076,7.74766058 23.9097682,7.73704507 23.9044604,7.72642957 C23.8991527,7.71581406 23.8938449,7.71050631 23.8885372,7.6998908 C23.8832294,7.6892753 23.8726139,7.67865979 23.8673062,7.66804429 C23.8619984,7.65742878 23.8566907,7.65212103 23.8460752,7.64150552 C23.8407674,7.63089002 23.8301519,7.62558226 23.8248442,7.61496676 C23.8195364,7.60435125 23.8089209,7.5990435 23.8036131,7.58842799 C23.7983054,7.57781249 23.7876899,7.57250473 23.7823821,7.56719698 C23.7717666,7.55658148 23.7664589,7.55127372 23.7558434,7.54065822 C23.7452279,7.53535046 23.7399201,7.52473496 23.7293046,7.5194272 C23.7186891,7.51411945 23.7080736,7.50350395 23.6974581,7.49819619 C23.6868426,7.49288844 23.6815348,7.48758069 23.6709193,7.48227293 C23.6603038,7.47696518 23.6496883,7.47165743 23.6390728,7.46104192 C23.6284573,7.45573417 23.6178418,7.45042642 23.6072263,7.44511866 C23.5966108,7.43981091 23.5859953,7.43450316 23.5753798,7.42919541 C23.5647643,7.42388765 23.5541488,7.4185799 23.5435332,7.41327215 C23.5329177,7.40796439 23.5223022,7.40796439 23.5116867,7.40265664 C23.5010712,7.39734889 23.485148,7.39204114 23.4745325,7.39204114 C23.463917,7.39204114 23.4533014,7.38673338 23.4479937,7.38673338 C23.4320704,7.38142563 23.4214549,7.38142563 23.4055317,7.38142563 C23.4002239,7.38142563 23.3949162,7.37611788 23.3843007,7.37611788 L5.34855626,4.88678176 L5.34855626,2.37090688 C5.34855626,2.34436811 5.34855626,2.31782935 5.34324851,2.29659834 C5.34324851,2.29129059 5.34324851,2.28598283 5.33794076,2.27536733 C5.33794076,2.25944407 5.332633,2.24352081 5.332633,2.22759755 C5.32732525,2.21167429 5.32732525,2.20105879 5.3220175,2.18513553 C5.3220175,2.17452002 5.31670975,2.16921227 5.31670975,2.15859676 C5.31140199,2.1426735 5.30609424,2.12675025 5.30078649,2.11082699 C5.30078649,2.10551923 5.29547873,2.09490373 5.29547873,2.08959597 C5.29017098,2.07367272 5.28486323,2.06305721 5.27424772,2.04713395 C5.26893997,2.0418262 5.26893997,2.03121069 5.26363222,2.02590294 C5.25832446,2.01528743 5.25301671,2.00467193 5.24240121,1.99405642 C5.23709345,1.98344092 5.2317857,1.97813316 5.22647795,1.96751766 C5.22117019,1.95690215 5.21586244,1.9515944 5.21055469,1.94097889 C5.20524693,1.93036339 5.19463143,1.91974788 5.18932368,1.90913238 C5.18401592,1.90382462 5.17870817,1.89851687 5.17340042,1.89320912 C5.16278491,1.88259361 5.15216941,1.87197811 5.1415539,1.8613626 C5.13624615,1.85605485 5.13093839,1.85074709 5.12563064,1.84543934 C5.11501514,1.83482384 5.10439963,1.82420833 5.08847637,1.81359282 C5.08316862,1.80828507 5.07255311,1.80297732 5.06724536,1.79766956 C5.05662985,1.78705406 5.04601435,1.78174631 5.03539884,1.7711308 C5.01947558,1.76051529 5.00355232,1.74989979 4.99293682,1.74459204 C4.98762907,1.73928428 4.98232131,1.73928428 4.97701356,1.73397653 C4.95578255,1.72336102 4.92924378,1.71274552 4.90801277,1.70213001 L0.996198875,0.0567266093 C0.629963924,-0.0971982252 0.210651444,0.072649868 0.0567266093,0.438884819 C-0.0971982252,0.80511977 0.072649868,1.22443225 0.438884819,1.37835708 L3.91015522,2.84329689 L3.91015522,6.09164167 L3.91015522,6.6064937 L3.91015522,10.5554619 L3.91015522,14.0851176 L3.91015522,18.54363 C3.91015522,20.0298008 5.02478334,21.2611995 6.46318438,21.4469708 C6.20310448,21.8822066 6.04917965,22.3917509 6.04917965,22.9331417 C6.04917965,24.5307753 7.34957911,25.825867 8.94190499,25.825867 C10.5342309,25.825867 11.8346303,24.5254675 11.8346303,22.9331417 C11.8346303,22.4023664 11.691321,21.8981298 11.4365489,21.4735096 L17.8801609,21.4735096 C17.6253888,21.9034376 17.4820794,22.4023664 17.4820794,22.9331417 C17.4820794,24.5307753 18.7824789,25.825867 20.3748048,25.825867 C21.9671306,25.825867 23.2675301,24.5254675 23.2675301,22.9331417 C23.2675301,21.3408158 21.9671306,20.0404163 20.3748048,20.0404163 L6.84003483,20.0404163 C6.01202538,20.0404163 5.34324851,19.3663317 5.34324851,18.54363 L5.34324851,16.6009924 C5.77848425,16.8557646 6.29333628,17.0043817 6.84003483,17.0043817 Z M10.4068448,22.9278339 C10.4068448,23.7346124 9.74868343,24.387466 8.94721274,24.387466 C8.14574205,24.387466 7.48758069,23.7293046 7.48758069,22.9278339 C7.48758069,22.1263632 8.14574205,21.4682019 8.94721274,21.4682019 C9.74868343,21.4682019 10.4068448,22.1210555 10.4068448,22.9278339 Z M21.8397446,22.9278339 C21.8397446,23.7346124 21.1815832,24.387466 20.3801125,24.387466 C19.5786418,24.387466 18.9204805,23.7293046 18.9204805,22.9278339 C18.9204805,22.1263632 19.5786418,21.4682019 20.3801125,21.4682019 C21.1815832,21.4682019 21.8397446,22.1210555 21.8397446,22.9278339 Z M21.0701204,15.5712884 L6.84003483,15.5712884 C6.01202538,15.5712884 5.34324851,14.8972038 5.34324851,14.0745021 L5.34324851,10.5448464 L5.34324851,6.5958782 L5.34324851,6.33049055 L22.5669067,8.7030561 L22.5669067,14.0691943 C22.5669067,14.9025115 21.8928221,15.5712884 21.0701204,15.5712884 Z" id="path-1"></path>
        </defs>
        <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="UX/Panier">
                <g id="Panier" transform="translate(3.000000, 1.500000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <use id="Shape" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
                    <g id="UX/Primary" mask="url(#mask-2)" fill="#276EF1">
                        <g transform="translate(-3.000000, -1.500000)" id="Primary">
                            <rect x="0" y="0" width="30" height="30"></rect>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </symbol>

    <symbol id="icon-burger" width="30" height="30" viewBox="0 0 30 30">
        <defs>
            <path id="a" d="M4 21h22a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0-7h22a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0-7h22a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2z"/>
        </defs>
        <g fill="none" fill-rule="evenodd">
            <path d="M0 0h30v30H0z"/>
            <mask id="b" fill="#fff">
                <use xlink:href="#a"/>
            </mask>
            <use fill="#FFF" xlink:href="#a"/>
            <g fill="#FFF" mask="url(#b)">
                <path d="M0 0h30v30H0z"/>
            </g>
        </g>
    </symbol>
</svg>



<button class="search-form__button search-form__button--hidden">
        <svg width="40" height="38" class="form_search-button">
            <title>Search</title>
            <use xlink:href="#icon-search"></use>
        </svg>
    </button>



 <svg width="40" height="38" class="nav__toggle-button">
            <title>Menu</title>
            <use xlink:href="#icon-burger"></use>
</svg>



Quand j'appelle mes icones, systématiquement il m'affiche la première icone du sprite .
Quelqu'un à t'il déjà rencontrer le problème ?
Administrateur
Bonjour,

tous ces "path-1"… Ces id dupliqués doivent très probablement poser problème Smiley lol
defs c'est ce qui a été remplacé par symbols pour faire des sprites nan ? Le mélange me semble bizarre mais bon tant que c'est de la cuisine interne ça ne devrait pas avoir d'influence…
Felipe a écrit :
Bonjour,

tous ces "path-1"… google street view Ces id dupliqués doivent très probablement poser problème Smiley lol
defs c'est ce qui a été remplacé par symbols pour faire des sprites nan ? Le mélange me semble bizarre mais bon tant que c'est de la cuisine interne ça ne devrait pas avoir d'influence…


Merci beaucoup c'est exactement ce qu'il me fallait