• Обновлено
  • Просмотры: 142

Если не показывается градиент у SVG изображения подключенный через спрайт

На текущий момент 13/10/2021 при подключение SVG изображения у которого есть градиент, корректно отображается только в Firefox 93.

Пример подключения SVG спрайта

sprite-exampleСкачать

Код подключения в html

<!-- Иконка 1 -->
<svg width="50" height="50">
  <use xlink:href="https://kalaganov5.com/wp-content/uploads/2022/02/sprite-example.svg#icon-facebook"></use>
</svg>
<!-- Иконка 2 -->
<svg width="50" height="50">
  <use xlink:href="https://kalaganov5.com/wp-content/uploads/2022/02/icons-preview.png#icon-search"></use>
</svg>

Превью

Как будут отображаться иконки:

  1. Google Chrome 94.0.4606.81
Если не показывается градиент у SVG изображения подключенный через спрайт icons preview
Хром не отображает иконку с градиентом
  1. Firefox 93
Если не показывается градиент у SVG изображения подключенный через спрайт icon with gradient
В Firefox все хорошо
  1. Safari 15.0 (16612.1.29.41.4, 16612)
Если не показывается градиент у SVG изображения подключенный через спрайт safary with icon
Сафари просто закрашивает черным цветом там где должен быть градиент

Что же делать? К сожалению подключение через внешний файл svg спрайтов с градиентами пока нет

Чуть подробнее http://dreamhelg.ru/2017/02/symbol-svg-sprite-detail-guide/

Что остается

<div style="background-color: gray;">
<!-- Иконка 1-->
<svg width="50" height="50">
  <use xlink:href="https://kalaganov5.com/wp-content/uploads/2022/02/sprite-example.svg#icon-facebook"></use>
</svg>
<!-- Иконка 2-->
<svg width="50" height="50" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M20.7099 19.2899L16.9999 15.6099C18.44 13.8143 19.1374 11.5352 18.9487 9.2412C18.76 6.94721 17.6996 4.81269 15.9854 3.27655C14.2713 1.74041 12.0337 0.919414 9.73283 0.982375C7.43194 1.04534 5.24263 1.98747 3.61505 3.61505C1.98747 5.24263 1.04534 7.43194 0.982375 9.73283C0.919414 12.0337 1.74041 14.2713 3.27655 15.9854C4.81269 17.6996 6.94721 18.76 9.2412 18.9487C11.5352 19.1374 13.8143 18.44 15.6099 16.9999L19.2899 20.6799C19.3829 20.7736 19.4935 20.848 19.6153 20.8988C19.7372 20.9496 19.8679 20.9757 19.9999 20.9757C20.1319 20.9757 20.2626 20.9496 20.3845 20.8988C20.5063 20.848 20.6169 20.7736 20.7099 20.6799C20.8901 20.4934 20.9909 20.2442 20.9909 19.9849C20.9909 19.7256 20.8901 19.4764 20.7099 19.2899ZM9.9999 16.9999C8.61544 16.9999 7.26206 16.5894 6.11091 15.8202C4.95977 15.051 4.06256 13.9578 3.53275 12.6787C3.00293 11.3996 2.86431 9.99214 3.13441 8.63427C3.4045 7.27641 4.07119 6.02912 5.05016 5.05016C6.02912 4.07119 7.27641 3.4045 8.63427 3.13441C9.99214 2.86431 11.3996 3.00293 12.6787 3.53275C13.9578 4.06256 15.051 4.95977 15.8202 6.11091C16.5894 7.26206 16.9999 8.61544 16.9999 9.9999C16.9999 11.8564 16.2624 13.6369 14.9497 14.9497C13.6369 16.2624 11.8564 16.9999 9.9999 16.9999Z" fill="url(#searchLinear)"/>
<defs>
<linearGradient id="searchLinear" x1="0.979004" y1="0.979004" x2="24.4288" y2="15.376" gradientUnits="userSpaceOnUse">
<stop stop-color="#F3F9FF"/>
<stop offset="1" stop-color="#F1F0FF"/>
</linearGradient>
</defs>
</g>
</svg>
</div><div style="background-color: gray;">
<!-- Иконка 1-->
<svg width="50" height="50">
  <use xlink:href="https://kalaganov5.com/wp-content/uploads/2022/02/icons-preview.png#icon-facebook"></use>
</svg>
<!-- Иконка 2-->
<svg width="50" height="50" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M20.7099 19.2899L16.9999 15.6099C18.44 13.8143 19.1374 11.5352 18.9487 9.2412C18.76 6.94721 17.6996 4.81269 15.9854 3.27655C14.2713 1.74041 12.0337 0.919414 9.73283 0.982375C7.43194 1.04534 5.24263 1.98747 3.61505 3.61505C1.98747 5.24263 1.04534 7.43194 0.982375 9.73283C0.919414 12.0337 1.74041 14.2713 3.27655 15.9854C4.81269 17.6996 6.94721 18.76 9.2412 18.9487C11.5352 19.1374 13.8143 18.44 15.6099 16.9999L19.2899 20.6799C19.3829 20.7736 19.4935 20.848 19.6153 20.8988C19.7372 20.9496 19.8679 20.9757 19.9999 20.9757C20.1319 20.9757 20.2626 20.9496 20.3845 20.8988C20.5063 20.848 20.6169 20.7736 20.7099 20.6799C20.8901 20.4934 20.9909 20.2442 20.9909 19.9849C20.9909 19.7256 20.8901 19.4764 20.7099 19.2899ZM9.9999 16.9999C8.61544 16.9999 7.26206 16.5894 6.11091 15.8202C4.95977 15.051 4.06256 13.9578 3.53275 12.6787C3.00293 11.3996 2.86431 9.99214 3.13441 8.63427C3.4045 7.27641 4.07119 6.02912 5.05016 5.05016C6.02912 4.07119 7.27641 3.4045 8.63427 3.13441C9.99214 2.86431 11.3996 3.00293 12.6787 3.53275C13.9578 4.06256 15.051 4.95977 15.8202 6.11091C16.5894 7.26206 16.9999 8.61544 16.9999 9.9999C16.9999 11.8564 16.2624 13.6369 14.9497 14.9497C13.6369 16.2624 11.8564 16.9999 9.9999 16.9999Z" fill="url(#searchLinear)"/>
<defs>
<linearGradient id="searchLinear" x1="0.979004" y1="0.979004" x2="24.4288" y2="15.376" gradientUnits="userSpaceOnUse">
<stop stop-color="#F3F9FF"/>
<stop offset="1" stop-color="#F1F0FF"/>
</linearGradient>
</defs>
</g>
</svg>
</div><div style="background-color: gray;">
<!-- Иконка 1-->
<svg width="50" height="50">
  <use xlink:href="https://kalaganov5.com/wp-content/uploads/2022/02/icons-preview.png#icon-facebook"></use>
</svg>
<!-- Иконка 2-->
<svg width="50" height="50" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M20.7099 19.2899L16.9999 15.6099C18.44 13.8143 19.1374 11.5352 18.9487 9.2412C18.76 6.94721 17.6996 4.81269 15.9854 3.27655C14.2713 1.74041 12.0337 0.919414 9.73283 0.982375C7.43194 1.04534 5.24263 1.98747 3.61505 3.61505C1.98747 5.24263 1.04534 7.43194 0.982375 9.73283C0.919414 12.0337 1.74041 14.2713 3.27655 15.9854C4.81269 17.6996 6.94721 18.76 9.2412 18.9487C11.5352 19.1374 13.8143 18.44 15.6099 16.9999L19.2899 20.6799C19.3829 20.7736 19.4935 20.848 19.6153 20.8988C19.7372 20.9496 19.8679 20.9757 19.9999 20.9757C20.1319 20.9757 20.2626 20.9496 20.3845 20.8988C20.5063 20.848 20.6169 20.7736 20.7099 20.6799C20.8901 20.4934 20.9909 20.2442 20.9909 19.9849C20.9909 19.7256 20.8901 19.4764 20.7099 19.2899ZM9.9999 16.9999C8.61544 16.9999 7.26206 16.5894 6.11091 15.8202C4.95977 15.051 4.06256 13.9578 3.53275 12.6787C3.00293 11.3996 2.86431 9.99214 3.13441 8.63427C3.4045 7.27641 4.07119 6.02912 5.05016 5.05016C6.02912 4.07119 7.27641 3.4045 8.63427 3.13441C9.99214 2.86431 11.3996 3.00293 12.6787 3.53275C13.9578 4.06256 15.051 4.95977 15.8202 6.11091C16.5894 7.26206 16.9999 8.61544 16.9999 9.9999C16.9999 11.8564 16.2624 13.6369 14.9497 14.9497C13.6369 16.2624 11.8564 16.9999 9.9999 16.9999Z" fill="url(#searchLinear)"/>
<defs>
<linearGradient id="searchLinear" x1="0.979004" y1="0.979004" x2="24.4288" y2="15.376" gradientUnits="userSpaceOnUse">
<stop stop-color="#F3F9FF"/>
<stop offset="1" stop-color="#F1F0FF"/>
</linearGradient>
</defs>
</g>
</svg>
</div>

Похожие посты