Задать вопрос
@caof19
css

Как использовать градиент в SVG?

Здравствуйте, такая проблема у меня есть svg файл со спрайтам, там лежит один спрайт, у него прописан градиент, кодом выглядит так:
<symbol fill="none" viewBox="0 0 56 64" id="garant" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
              d="M28.888.215l25.575 11.352a2.495 2.425 0 0 1 1.483 2.28V33.56c0 5.492-1.562 11.023-4.518 15.996a2.495 2.495 0 1 1-4.29-2.55c2.498-4.201 3.817-8.851 3.817-13.446V15.47L27.881 5.227 5.045 15.464V33.56c0 13.32 10.941 25.45 25.955 25.45 4.247 0 8.398-1.388 12.006-4.014a2.495 2.495 0 0 1 2.936 4.035C38.476 62.281 33.31 64 28 64c-3.791 0-7.5-.893-11.022-2.653-3.288-1.644-6.265-3.963-8.846-6.895C2.999 48.624.055 41.01.055 33.56V13.848c0-.983.577-1.875 1.444-2.277L26.855.218a2.495 2.495 0 0 1 2.033-.003zM26.772 38.3l12.299-17.178a2.425 2.495 0 1 1 4.057 2.904L30.78 41.276a2.306 2.306 0 0 1-.084.11 6.431 6.431 0 0 1-4.998 2.396 6.433 6.433 0 0 1-4.448-1.79l-7.962-7.77a2.495 2.495 0 0 1 3.485-3.571l7.948 7.757c.392.367.837.396 1.069.381.226-.015.646-.099.982-.489z"
              fill="url(#fpaint0_linear)"/>
        <defs>
            <linearGradient id="fpaint0_linear" x1=".055" y1="32.033" x2="55.946" y2="32.033"
                            gradientUnits="userSpaceOnUse">
                <stop stop-color="#944DEB"/>
                <stop offset="1" stop-color="#4F76DC"/>
            </linearGradient>
        </defs>
    </symbol>

Далее я его использую при помощи svg-use
<svg class="icon icon-garant">
              <use href="icon/spriteraw.svg#garant"></use>
            </svg>

Но, почему то, теги , в которых прописан градиент, в html не отображаются. Если вставить svg кодом на страницу, то отображается все как должно, но не хочу засорять html
  • Вопрос задан
  • 1536 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка 3.0
    3 месяца
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 2
develx
@develx Куратор тега CSS
Web developer
Если вставить svg кодом на страницу, то отображается все как должно, но не хочу засорять html

градиенты, фильтры, clip-path, маски в svg из внешнего файла не будут работать
dreamhelg.ru/2017/02/symbol-svg-sprite-detail-guide - здесь написано по поводу градиентов
https://css-tricks.com/ используют из-за этого спрайты в html
Ответ написан
1 комментарий
1 комментарий
RAX7
@RAX7
Можешь только градиент в html засунуть
<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="width:0;height:0;position:absolute;">
    <defs>
      <linearGradient id="fpaint0_linear" x1=".055" y1="32.033" x2="55.946" y2="32.033" gradientUnits="userSpaceOnUse">
        <stop stop-color="#944DEB" />
        <stop offset="1" stop-color="#4F76DC" />
      </linearGradient>
    </defs>
  </svg>

  <svg class="icon icon-garant" fill="url(#fpaint0_linear)">
    <use href="spriteraw.svg#garant" ></use>
  </svg>
</body>


а в спрайте убрать fill
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 56 64" id="garant" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M28.888.215l25.575 ..."/>
</symbol>
</svg>
Ответ написан
9 комментариев
9 комментариев
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
В фурифоксе это и так работает. Как и положено по спеке.
В хромом приемнике осла - многолетний баг(а точнее).

Решения нет, только пихать на страницу, что убивает весь смысл.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
ITK academy • Нижний Новгород
от 50 000 до 90 000 ₽
PHP-разработчик
FoodSoul • Калининград
от 180 000 до 250 000 ₽
Frontend Developer (React + Node.js)
Alfabet Service
от 1 000 до 2 000 $
Ещё вакансии