Хобрук: Ваш путь к мастерству в программировании

Сдвиньте заливку svg вниз при наведении

У меня есть svg, я хочу заполнить фон при наведении и заставить его скользить вниз, я сделал эффект наведения, но я не могу заставить заливку скользить вниз при наведении, как я могу это сделать? вот мой код:

svg:hover{ 
    fill: #080; 
}

я хочу сделать что-то вроде этой анимации:

#grad:hover {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow);
}
23.04.2017

Ответы:


1

<svg xmlns="http://www.w3.org/2000/svg"
 width="226" height="226">
  <circle id="c" cx="110" cy="107" r="80" stroke="black"
      stroke-width="5" fill="red" />
      
  <style>
    #c{
      transition: all .3s ease-in-out;
    }
    #c:hover{
      fill:blue;
      transform:translateY(-20px);
    }
  </style>
</svg>

Что-то такое?

23.04.2017
  • Я хочу, чтобы синий цвет скользил вниз, проверьте это, пожалуйста: codepen.io/ianfarb/pen/fcmGt 23.04.2017
  • вы можете попробовать что-то вроде этого: stackoverflow.com/questions/5239458/ с изображением простого цвета, затем вы преобразуете его для имитации заполнения. 23.04.2017

  • 2

    Как насчет этого тогда? Он использует SMIL для анимации остановки градиента, тем самым перемещая точку перехода красный/синий.

    <svg xmlns="http://www.w3.org/2000/svg"
     width="226" height="226">
      <defs>
        <linearGradient id="MyGradient" x2="0%" y2="100%">
          <stop offset="0%"  stop-color="red">
            <animate attributeName="offset" from="0%"
      to="100%" dur="1s" begin="c.mouseover" 
      fill="freeze"/>
            <animate attributeName="offset" from="100%"
      to="0%" dur="1s" begin="c.mouseout" 
      fill="freeze"/>
      </stop>
              <stop offset="0%"  stop-color="blue"/>
          </linearGradient>
      </defs>
      <circle id="c" cx="110" cy="107" r="80" stroke="black"
          stroke-width="5" fill="url(#MyGradient)" />
    </svg>

    23.04.2017
    Новые материалы

    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..

    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..

    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..

    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..

    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..

    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..

    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..