Почему отображаются не все SVG?

Question

[Илья]

Привет, отображаются не все спрайты, а я не вижу причины
Подскажите какую часть кода предоставить и как
Спасибо

Comments

[Загир Меджидов]

предоставьте код, где у вас идёт подгрузка SVG и желательно всю информацию, чтобы легче было определить ошибку. Можете показать структуру проекта?

[Илья]

Загир Меджидов,

<div class="hero__icons-section">
              <ul class="features">
                <li class="features__item feature">
                  <svg class="feature__icon">
                    <use xlink:href="./img/sprite.svg#sound"></use>
                  </svg>
                  <div class="feature__text">Безупречный звук</div>
                </li>
                <li class="features__item feature">
                  <svg class="feature__icon">
                    <use xlink:href="./img/sprite.svg#battery"></use>
                  </svg>
                  <div class="feature__text">До 40 часов работы</div>
                </li>
                <li class="features__item feature">
                  <svg class="feature__icon">
                    <use xlink:href="./img/sprite.svg#plug"></use>
                  </svg>
                  <div class="feature__text">Технология Fast Fuel</div>
                </li>
              </ul>
            </div>

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="sound" viewBox="0 0 52 52">
    <g clip-path="url(#clip0_2_1030)">
    <path d="M15.9708 1C7.71605 1 1 8.27579 1 17.2591C1.03177 19.342 1.60287 21.3811 2.6576 23.1775C3.15599 24.0277 3.58274 24.918 3.93344 25.839C4.16602 26.5159 3.94278 27.2658 3.37786 27.7053C2.39499 28.4911 1.82544 29.6832 1.83171 30.9415C1.82776 32.3243 2.51136 33.6185 3.65565 34.3948C4.06703 34.6743 4.31726 35.1359 4.32684 35.6332V42.5854C4.32684 47.1715 7.68444 50.9025 11.8122 50.9025C15.94 50.9025 19.2976 47.1715 19.2976 42.5854C19.285 39.1601 20.7745 35.9014 23.373 33.6695C28.2442 29.6051 31.0244 23.5619 30.9415 17.2183C30.9415 8.27579 24.2255 1 15.9708 1ZM22.2917 32.4062C19.3233 34.9534 17.621 38.674 17.6342 42.5854C17.6342 46.2541 15.0218 49.2391 11.8122 49.2391C8.60265 49.2391 5.99025 46.2541 5.99025 42.5854V35.6332C5.97678 34.6031 5.47131 33.6417 4.63041 33.0466C3.91983 32.5825 3.49254 31.7902 3.49513 30.9415C3.48942 30.1765 3.83983 29.4523 4.44327 28.982C5.55062 28.0949 5.97343 26.603 5.49622 25.2668C5.11317 24.2593 4.64662 23.2856 4.10144 22.3558C3.18489 20.7969 2.68934 19.0265 2.66342 17.2183C2.66342 9.19316 8.63342 2.66342 15.9708 2.66342C23.3081 2.66342 29.2781 9.19316 29.2781 17.2183C29.3542 23.0745 26.788 28.6533 22.2917 32.4062Z" />
    <path d="M15.9707 5.15854C11.3356 5.15854 7.38335 8.44545 5.84885 13.0398C5.83803 13.0673 5.83055 13.0939 5.82223 13.123C5.38372 14.4571 5.15915 15.8522 5.15686 17.2566C5.15686 18.2546 5.15686 21.307 7.06397 23.2141C7.39032 23.5293 7.90906 23.5248 8.22988 23.204C8.5507 22.8832 8.5552 22.3644 8.24001 22.0381C7.55671 21.2785 7.11793 20.3308 6.9808 19.3184C7.11471 19.3101 7.24695 19.2993 7.38584 19.2993C11.2034 19.2976 14.3073 22.7908 14.3073 27.0824C14.3073 27.4808 14.2882 27.855 14.2574 28.2243C13.8433 28.6664 13.4028 29.0831 12.9383 29.4719C10.5159 31.4557 9.17332 34.4674 9.31707 37.5952C9.31707 38.0545 9.68944 38.4269 10.1488 38.4269C10.6081 38.4269 10.9805 38.0545 10.9805 37.5952C10.8374 34.958 11.9646 32.4116 14.0129 30.7444C16.9473 28.4922 18.6072 24.9568 18.4659 21.2604C18.4659 16.0539 14.5485 11.8122 9.73293 11.8122C9.17973 11.8137 8.62816 11.8722 8.08697 11.9869C9.53264 8.91802 12.5799 6.92167 15.9707 6.82196C21.0151 6.82196 25.1195 11.502 25.1195 17.2549C25.1849 21.787 23.2194 26.1106 19.7617 29.0411C19.6469 29.14 19.5196 29.2465 19.3816 29.3621C17.7265 30.7377 14.284 33.6038 13.4806 40.8305C13.432 41.2859 13.7607 41.6949 14.2158 41.7454C14.2462 41.7498 14.2767 41.7526 14.3073 41.7537C14.731 41.7533 15.0866 41.4346 15.1332 41.0135C15.8626 34.4513 18.8426 31.972 20.4445 30.6404C20.5917 30.5173 20.7273 30.4042 20.8487 30.2994C24.6768 27.0566 26.8537 22.2714 26.783 17.2549C26.783 10.5846 21.9324 5.15854 15.9707 5.15854ZM9.73293 13.4756C13.6311 13.4756 16.8025 16.9688 16.8025 21.2604C16.8402 22.8342 16.5277 24.3966 15.8876 25.8348C15.3295 21.2105 11.7349 17.6342 7.38751 17.6342C7.19538 17.6342 7.01074 17.6483 6.82527 17.6616C6.82527 17.5019 6.82527 17.363 6.82527 17.2549C6.82557 16.1427 6.98465 15.0361 7.29768 13.9688C8.0689 13.6452 8.89657 13.4776 9.73293 13.4756Z" />
    <path d="M42.5854 20.1293C42.6492 17.508 43.7609 15.0216 45.6719 13.2261C45.904 13.02 46.002 12.7017 45.926 12.4007C45.8501 12.0997 45.6128 11.8661 45.3106 11.7948C45.0084 11.7235 44.6917 11.8264 44.4892 12.0617C42.268 14.1648 40.983 17.071 40.922 20.1293C40.983 23.1876 42.268 26.0937 44.4892 28.1969C44.6917 28.4322 45.0084 28.5351 45.3106 28.4638C45.6128 28.3925 45.8501 28.1589 45.926 27.8579C46.002 27.5569 45.904 27.2386 45.6719 27.0325C43.7609 25.237 42.6492 22.7506 42.5854 20.1293Z" />
    <path d="M48.1288 15.3495C47.964 15.2028 47.7477 15.1275 47.5275 15.1403C47.3072 15.1531 47.1011 15.2529 46.9544 15.4177C44.4561 18.062 44.4561 22.1966 46.9544 24.8409C47.152 25.0629 47.453 25.1626 47.744 25.1024C48.0351 25.0423 48.2719 24.8315 48.3653 24.5494C48.4587 24.2673 48.3946 23.9567 48.197 23.7348C46.2597 21.7215 46.2597 18.5371 48.197 16.5239C48.3437 16.3591 48.4189 16.1428 48.4061 15.9225C48.3933 15.7023 48.2936 15.4962 48.1288 15.3495Z"/>
    <path d="M50.6887 17.9095C50.3814 17.5683 49.8557 17.5407 49.5144 17.8479C48.8154 18.3986 48.4074 19.2394 48.4074 20.1293C48.4074 21.0192 48.8154 21.86 49.5144 22.4107C49.7341 22.6165 50.0479 22.6875 50.3348 22.5964C50.6217 22.5052 50.837 22.2662 50.8976 21.9713C50.9583 21.6764 50.8548 21.3717 50.6272 21.1748C50.3047 20.9185 50.1032 20.5399 50.0708 20.1293C50.1032 19.7187 50.3047 19.3401 50.6272 19.0838C50.9684 18.7765 50.9959 18.2508 50.6887 17.9095Z"/>
    <path d="M38.4269 20.1293C38.4269 16.4698 40.0662 12.9334 43.1676 9.91259C43.3804 9.70459 43.466 9.39889 43.3923 9.11064C43.3185 8.82239 43.0966 8.59539 42.8101 8.51514C42.5236 8.43489 42.216 8.51358 42.0032 8.72158C38.5766 12.0617 36.7635 16.0065 36.7635 20.1293C36.7635 24.2521 38.5766 28.1969 42.0032 31.537C42.3321 31.8586 42.8594 31.8526 43.1809 31.5237C43.5025 31.1948 43.4965 30.6676 43.1676 30.346C40.0662 27.3253 38.4269 23.7888 38.4269 20.1293Z">
    <path d="M34.2684 20.1293C34.2684 15.5599 36.1996 11.1585 39.855 7.40416C40.063 7.19111 40.1415 6.88328 40.061 6.59662C39.9805 6.30997 39.7532 6.08804 39.4647 6.01443C39.1762 5.94082 38.8703 6.02672 38.6623 6.23977C34.7 10.3151 32.6049 15.1183 32.6049 20.1293C32.6049 25.1403 34.7 29.9435 38.6623 34.0188C38.9839 34.3482 39.5115 34.3545 39.8408 34.033C40.1702 33.7114 40.1765 33.1838 39.855 32.8544C36.1996 29.1001 34.2684 24.6987 34.2684 20.1293Z">
    </g>
    <defs>
    <clipPath id="clip0_2_1030">
    <rect width="50" height="49.9025" transform="translate(1 1)"/>
    </clipPath>
    </defs>
  </symbol>
  <symbol id="battery" viewBox="0 0 52 52">
    <g clip-path="url(#clip0_44296_261)">
    <path d="M27.031 4.73074H13.969C12.527 4.73074 11.3539 5.90383 11.3539 7.34588V36.8079C11.3539 38.2499 12.527 39.423 13.969 39.423H27.031C28.4731 39.423 29.6462 38.2499 29.6462 36.8079V7.34597C29.6462 5.90383 28.4731 4.73074 27.031 4.73074ZM28.3846 36.8079C28.3846 37.5541 27.7772 38.1616 27.031 38.1616H13.969C13.2228 38.1616 12.6154 37.5541 12.6154 36.8079V7.34597C12.6154 6.59977 13.2228 5.99234 13.969 5.99234H27.031C27.7772 5.99234 28.3847 6.59977 28.3847 7.34597V36.8079H28.3846Z"/>
    <path d="M23.9693 1.57693H17.0308C16.6825 1.57693 16.4 1.8594 16.4 2.20773V5.36155C16.4 5.70989 16.6825 5.99235 17.0308 5.99235H23.9693C24.3176 5.99235 24.6001 5.70989 24.6001 5.36155V2.20773C24.6 1.8594 24.3176 1.57693 23.9693 1.57693ZM23.3385 4.73075H17.6615V2.83844H23.3385V4.73075Z"/>
    <path d="M25.1319 18.8996C25.0161 18.7175 24.8155 18.6075 24.6 18.6075H20.8154V12.9306C20.8154 12.6349 20.6099 12.379 20.3213 12.315C20.0301 12.2512 19.738 12.396 19.613 12.6639L15.1976 22.1255C15.1065 22.3207 15.1215 22.5494 15.2373 22.731C15.3531 22.9132 15.5537 23.0231 15.7692 23.0231H19.5538V28.7C19.5538 28.9957 19.7593 29.2516 20.0479 29.3157C20.0938 29.3259 20.1396 29.3308 20.1849 29.3308C20.4257 29.3308 20.6509 29.1922 20.7562 28.9667L25.1716 19.5052C25.2627 19.3099 25.2477 19.0812 25.1319 18.8996ZM19.5538 21.7615H16.7597L19.5538 15.7738V21.7615ZM20.8154 25.857V19.8692H23.6095L20.8154 25.857Z"/>
    </g>
    <defs>
    <clipPath id="clip0_44296_261">
    <rect width="37.8462" height="37.8462" fill="white" transform="translate(1.57692 1.57693)"/>
    </clipPath>
    </defs>
  </symbol>
</svg>

в спрайте больше файлов, но проблема только в этой секции
svg#sound отображается, остальные нет

[Загир Меджидов]

Секунду. Анализирую ваш милый код :)

[Froggyweb]

plug нет в svg, остальное отображается

[Илья]

Froggyweb, не стал его копировать т.к думал одинаковые проблемы
на что еще можно еще обратить внимание? на расстояние между объектами?

[Загир Меджидов]

Вр@Gtsk415, Код должен быть рабочим.

Froggyweb согласен с Вами. У тебя в ./img/sprite.svg нету #plug

[Загир Меджидов]

Илья, Я не смог найти ошибку у вас в коде.

[Илья]

у меня вот так https://gtsk415.github.io/first-home/

[Илья]

И если прописать sound за место battery или plug, то sound отображается везде

[Froggyweb]

у тебя разные способы отображения
в первом случае - это спрайт, в остальных просто изображение.

[Froggyweb]

при инлайн все работает https://codepen.io/froggyweb/pen/RwqxdKZ?editors=1000

[Илья]

Froggyweb, все равно не могу понять( могу вписать любое id из sprite и иконки отображаются, а вот после #sound нет
Пробовал сократить путь до <use xlink:href="#sound"></use> и так не отображается

[Максим]

Илья, в вопросе есть svg это и есть фрагмент спрайта?

[Илья]

Максим, да

[Максим]

Илья, я могу ошибиться но добавьте все заголовки в шапку svg тега

Answer 1

[Илья]

В итоге в спрайте поменял местами иконки и все заработало)