0

В общем есть прямоугольник с контуром, прозрачным фоном и текстом внутри.
Выглядит он вот так:

<svg width="130" height="40">
  <linearGradient id="logo_gradient" gradientTransform="rotate(45)">
    <stop offset="0" stop-color="#f4523d"></stop>
    <stop offset="100%" stop-color="#438fcb"></stop>
  </linearGradient>
  <rect x="2" y="2" width="126" height="36" fill="transparent" stroke="url(#logo_gradient)" stroke-width="2" />
  <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" dy=".3em" stroke="#000" stroke-width="0">Текст</text>
</svg>

  1. Как добавить градиент к текст
  2. Как сделать плавный "перелив" градиента при наведение (допустим с 45deg на 135deg)
    2.1. Какие способы есть для эффекта при наведение (cssилиjq, например)
1
  • Это можно сделать не учитывая CSS & JS
    – Arthur
    Commented 27 авг. 2018 в 18:22

1 ответ 1

2

можете использовать атрибут fill, так же как это делали для рамки

.button {
  filter: hue-rotate(0deg);
  transition: all 1s;
}

.button:hover {
  filter: hue-rotate(180deg);
}
 <svg class="button" width="130" height="40">
      <linearGradient id="logo_gradient" gradientTransform="rotate(45)">
        <stop offset="0" stop-color="#f4523d"></stop>
        <stop offset="100%" stop-color="#438fcb"></stop>
      </linearGradient>
      <rect x="2" y="2" width="126" height="36" fill="transparent" stroke="url(#logo_gradient)" stroke-width="2" />
      <text fill="url(#logo_gradient)" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" dy=".3em">Текст</text>
    </svg>

3
  • на stackoveflow часто обсуждали что hover на SVG работает ни везде, автор очевидно не проверял Ваш пример в Лисе или в других браузерах...в общем не кроссбраузерно
    – user33274
    Commented 30 авг. 2018 в 0:29
  • 1
    на текущий момент это работает в Chrome, Opera, Firefox, Safari, единственная проблема в Edge - там не работает плавность анимации Commented 30 авг. 2018 в 6:56
  • да я проверил..действительно работает ! извеняюсь .... но единственно в файере тектст мыльный ...очень плохо видно
    – user33274
    Commented 30 авг. 2018 в 7:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.