@nukvi2

Почему иконка из спрайта через use отображается неправильно?

Когда вставляю иконку из спрайта через img, то она выглядит нормально:
61ababb215446304487314.jpeg
Но когда вставляю через use,
<svg class="profile-control__btn-icon profile-control__btn-icon--notifications">
     <use xlink:href="img/sprites/sprite.svg#notifications"></use>
 </svg>

то она выглядит вот так:
61ababef22271084310345.jpeg

Как это можна исправить?
Код иконки:
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_0_47" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64706 14.4C8.64706 15.28 7.90588 16 7 16C6.09412 16 5.35294 15.28 5.35294 14.4H6.64706H7H7.35294H8.64706ZM10.3529 11.6V11.2V6.8C10.3529 5.33599 9.30227 4.04187 7.7867 3.69304L7 3.51197L6.2133 3.69304C4.69773 4.04187 3.64706 5.33599 3.64706 6.8V11.2V11.6H10.3529ZM12.7647 11.6L14 12.8V13.6H13.2229H12H11.9532H2.04679H2H0.777143H0V12.8L1.23529 11.6L1.64706 11.2V6.8C1.64706 4.344 3.40118 2.288 5.76471 1.744V1.2C5.76471 0.536 6.31647 0 7 0C7.68353 0 8.23529 0.536 8.23529 1.2V1.744C10.5988 2.288 12.3529 4.344 12.3529 6.8V11.2L12.7647 11.6Z"/>
</mask>
<path d="M8.64706 14.4H10.6471V12.4H8.64706V14.4ZM5.35294 14.4V12.4H3.35294V14.4H5.35294ZM10.3529 11.6V13.6H12.3529V11.6H10.3529ZM7.7867 3.69304L7.3381 5.64208L7.3381 5.64208L7.7867 3.69304ZM7 3.51197L7.4486 1.56293L7 1.45968L6.5514 1.56293L7 3.51197ZM6.2133 3.69304L6.6619 5.64208L6.6619 5.64208L6.2133 3.69304ZM3.64706 11.6H1.64706V13.6H3.64706V11.6ZM14 12.8H16V11.9545L15.3936 11.3654L14 12.8ZM12.7647 11.6L11.3711 13.0346L11.3711 13.0346L12.7647 11.6ZM14 13.6V15.6H16V13.6H14ZM0 13.6H-2V15.6H0V13.6ZM0 12.8L-1.39357 11.3654L-2 11.9545V12.8H0ZM1.23529 11.6L-0.158278 10.1654L-0.158278 10.1654L1.23529 11.6ZM1.64706 11.2L3.04063 12.6346L3.64706 12.0455V11.2H1.64706ZM5.76471 1.744L6.21331 3.69304L7.76471 3.33596V1.744H5.76471ZM8.23529 1.744H6.23529V3.33596L7.78669 3.69304L8.23529 1.744ZM12.3529 11.2H10.3529V12.0455L10.9594 12.6346L12.3529 11.2ZM7 18C8.95541 18 10.6471 16.4388 10.6471 14.4H6.64706C6.64706 14.1212 6.85636 14 7 14V18ZM3.35294 14.4C3.35294 16.4388 5.04459 18 7 18V14C7.14364 14 7.35294 14.1212 7.35294 14.4H3.35294ZM6.64706 12.4H5.35294V16.4H6.64706V12.4ZM7 12.4H6.64706V16.4H7V12.4ZM7.35294 12.4H7V16.4H7.35294V12.4ZM8.64706 12.4H7.35294V16.4H8.64706V12.4ZM8.35294 11.2V11.6H12.3529V11.2H8.35294ZM8.35294 6.8V11.2H12.3529V6.8H8.35294ZM7.3381 5.64208C7.99807 5.79398 8.35294 6.32045 8.35294 6.8H12.3529C12.3529 4.35153 10.6065 2.28976 8.23529 1.744L7.3381 5.64208ZM6.5514 5.46101L7.3381 5.64208L8.23529 1.744L7.4486 1.56293L6.5514 5.46101ZM6.6619 5.64208L7.4486 5.46101L6.5514 1.56293L5.76471 1.744L6.6619 5.64208ZM5.64706 6.8C5.64706 6.32045 6.00193 5.79398 6.6619 5.64208L5.76471 1.744C3.39352 2.28976 1.64706 4.35153 1.64706 6.8H5.64706ZM5.64706 11.2V6.8H1.64706V11.2H5.64706ZM5.64706 11.6V11.2H1.64706V11.6H5.64706ZM10.3529 9.6H3.64706V13.6H10.3529V9.6ZM15.3936 11.3654L14.1583 10.1654L11.3711 13.0346L12.6064 14.2346L15.3936 11.3654ZM16 13.6V12.8H12V13.6H16ZM13.2229 15.6H14V11.6H13.2229V15.6ZM12 15.6H13.2229V11.6H12V15.6ZM11.9532 15.6H12V11.6H11.9532V15.6ZM2.04679 15.6H11.9532V11.6H2.04679V15.6ZM2 15.6H2.04679V11.6H2V15.6ZM0.777143 15.6H2V11.6H0.777143V15.6ZM0 15.6H0.777143V11.6H0V15.6ZM-2 12.8V13.6H2V12.8H-2ZM-0.158278 10.1654L-1.39357 11.3654L1.39357 14.2346L2.62887 13.0346L-0.158278 10.1654ZM0.253487 9.76544L-0.158278 10.1654L2.62887 13.0346L3.04063 12.6346L0.253487 9.76544ZM-0.352941 6.8V11.2H3.64706V6.8H-0.352941ZM5.31611 -0.20504C2.10462 0.534128 -0.352941 3.35201 -0.352941 6.8H3.64706C3.64706 5.33599 4.69773 4.04187 6.21331 3.69304L5.31611 -0.20504ZM3.76471 1.2V1.744H7.76471V1.2H3.76471ZM7 -2C5.26695 -2 3.76471 -0.622824 3.76471 1.2H7.76471C7.76471 1.69482 7.36599 2 7 2V-2ZM10.2353 1.2C10.2353 -0.622824 8.73305 -2 7 -2V2C6.63401 2 6.23529 1.69482 6.23529 1.2H10.2353ZM10.2353 1.744V1.2H6.23529V1.744H10.2353ZM14.3529 6.8C14.3529 3.35201 11.8954 0.534128 8.68389 -0.20504L7.78669 3.69304C9.30227 4.04187 10.3529 5.33599 10.3529 6.8H14.3529ZM14.3529 11.2V6.8H10.3529V11.2H14.3529ZM14.1583 10.1654L13.7465 9.76544L10.9594 12.6346L11.3711 13.0346L14.1583 10.1654Z" fill="#3E4056" mask="url(#path-1-inside-1_0_47)"/>
</svg>
  • Вопрос задан
  • 122 просмотра
Пригласить эксперта
Ответы на вопрос 1
@cheeroque
Выглядит так, потому что ломается ссылка на маску. Ссылка ломается потому, что в спрайт, скорее всего, попадает только path. Исправить можно, например, избавившись от маски, но там вообще какая-то дичь внутри иконки, проще будет её перерисовать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы