Часть SVG меняется в анимации при наведении - PullRequest
Новая
       73

Часть SVG меняется в анимации при наведении

0 голосов
/ 07 февраля 2020

Включено изображение svg-файла (не удалось загрузить svg-файл)

Я хотел бы навести указатель мыши и радиально изменить фон (на синий) только круга, из внутреннего круга до краев, как анимация.

Еще лучше, если анимация была своего рода колеблющимся эффектом от середины круга и наружу. Хорошо, если бы это было как бы "случайным" взглядом, эффект синего колебания. Важно, что это анимация от середины круга, к краю, пока весь круг не станет синим. Когда мышь / указатель мыши удаляется, анимация движется в обратном направлении.

Возможно ли это на земле svg / css и может ли кто-нибудь указывать в правильном направлении?

picture

enter image description here

1 Ответ

1 голос
/ 07 февраля 2020

Это немного хакерский способ сделать это, используя синий круг с черным штрихом, который начинается настолько толстым, что заполняет его внутреннюю часть. При наведении курсора на круг обводка сводится к нулю. 

.logo-background {
    fill: blue;
    stroke: black;
    stroke-width: 200;
    transition: stroke-width 500ms;
}
.logo-background:hover {
    stroke-width: 0;
}
.logo {
  fill: none;
  stroke: white;
  stroke-width: 5;
  pointer-events: none;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" height="100px">
  <defs>
    <clipPath id="circle-clip">
      <circle cx="100" cy="100" r="100" />
    </clipPath>
  </defs>

  <circle class="logo-background" cx="100" cy="100" r="100" clip-path="url(#circle-clip)" />
  <rect class="logo" x="60" y="60" width="80" height="80" rx="5" ry="5"/>
</svg>
...