2
    <a class="button2" href="#" id="button2">
       <svg xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="25" viewBox="0 0 22 18">
            <radialGradient id="radGrad"  r="200%">
            <stop offset="0%" stop-color ="#00ff7f" />
            <stop offset="4%" stop-color ="#00ffff" />
            <stop offset="12.25%" stop-color ="#00ff7f" />
            <stop offset="31.25%" stop-color ="#00ffff" />
            <stop offset="50%" stop-color ="#00ffff" />
            </radialGradient>
            <path id="button" d="M22 2.38918C21.191 2.73222 20.321 2.96407 19.4081 3.06852C20.3398 2.5346 21.0552 1.68955 21.3922 0.682817C20.5202 1.17718 19.5546 1.53577 18.526 1.72905C17.7032 0.891167 16.5301 0.367432 15.232 0.367432C12.7393 0.367432 10.7189 2.298 10.7189 4.67956C10.7189 5.01766 10.7584 5.34689 10.8357 5.6623C7.0846 5.4827 3.75901 3.76541 1.53295 1.15673C1.14443 1.79333 0.921886 2.53398 0.921886 3.3244C0.921886 4.82069 1.71835 6.14036 2.92973 6.91397C2.18992 6.89187 1.49391 6.6978 0.885376 6.37458C0.88451 6.39275 0.884504 6.41067 0.884504 6.4287C0.884504 8.51842 2.44044 10.2609 4.50492 10.6573C4.12653 10.7559 3.7279 10.808 3.31624 10.808C3.02512 10.808 2.74286 10.7817 2.46681 10.7311C3.04153 12.4443 4.70801 13.6912 6.68334 13.7261C5.13742 14.8829 3.19166 15.5719 1.07697 15.5719C0.712916 15.5719 0.353368 15.5514 0 15.5118C1.99818 16.7353 4.37022 17.449 6.91929 17.449C15.2207 17.449 19.7597 10.8783 19.7597 5.17934C19.7597 4.99246 19.7552 4.80686 19.747 4.62193C20.6285 4.01345 21.3936 3.25416 21.999 2.38921" fill="url(#radGrad)"/>
            <animate xlink:href="#radGrad"
                attributeName="r"
                dur="3s"
                begin="button.mouseover"
                end="button.mouseout"
                values="50%;300%;50%"
                repeatCount="indefinite"
                fill="freeze"
            />
            </svg>
        <p class="button-text">Кнопка</p>
    </a>

Анимация работает по наведению мыши только на саму иконку SVG, а надо чтобы запускалась при наведении на саму кнопку </>, причем если сделать : begin="button2.mouseover" - анимация перестает работать. Подскажите как сдлелать так чтобы анимация работала при наведение курсора на кнопку???

2

2 ответа 2

1

Вариант Pure SMIL

Браузеры Firefox и Chrome по разному обрабатывают события на кнопках, которые находятся вне SVG.

Поэтому для кроссбраузерности лучше всего иконку и кнопку разместить в одном svg.

Тогда будет всё работать везде одинаково, кроме IE старых версий.

  • Создаем кнопку внутри svg
<g id="button2" pointer-events="all">
     <rect x="14" y="16" width="7" rx="2" height="3" fill="red"></rect> 
      <text x="15" y="18" fill="white" font-weight="700" font-size="2px">Start </text>
</g>
  • Условие запуска анимации при наведении begin="button2.mouseenter"
  • Остановка анимации при покидании курсора begin="button2.mouseleave"

<a  href="https://ru.stackoverflow.com/questions">
       <svg  xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="140" viewBox="0 0 22 18" >
            <radialGradient id="radGrad"  r="200%" ">
            <stop offset="0%" stop-color ="#00ff7f" />
            <stop offset="4%" stop-color ="#00ffff" />
            <stop offset="12.25%" stop-color ="#00ff7f" />
            <stop offset="31.25%" stop-color ="#00ffff" />
            <stop offset="50%" stop-color ="#00ffff" />
            </radialGradient>
            
            <path  d="M22 2.38918C21.191 2.73222 20.321 2.96407 19.4081 3.06852C20.3398 2.5346 21.0552 1.68955 21.3922 0.682817C20.5202 1.17718 19.5546 1.53577 18.526 1.72905C17.7032 0.891167 16.5301 0.367432 15.232 0.367432C12.7393 0.367432 10.7189 2.298 10.7189 4.67956C10.7189 5.01766 10.7584 5.34689 10.8357 5.6623C7.0846 5.4827 3.75901 3.76541 1.53295 1.15673C1.14443 1.79333 0.921886 2.53398 0.921886 3.3244C0.921886 4.82069 1.71835 6.14036 2.92973 6.91397C2.18992 6.89187 1.49391 6.6978 0.885376 6.37458C0.88451 6.39275 0.884504 6.41067 0.884504 6.4287C0.884504 8.51842 2.44044 10.2609 4.50492 10.6573C4.12653 10.7559 3.7279 10.808 3.31624 10.808C3.02512 10.808 2.74286 10.7817 2.46681 10.7311C3.04153 12.4443 4.70801 13.6912 6.68334 13.7261C5.13742 14.8829 3.19166 15.5719 1.07697 15.5719C0.712916 15.5719 0.353368 15.5514 0 15.5118C1.99818 16.7353 4.37022 17.449 6.91929 17.449C15.2207 17.449 19.7597 10.8783 19.7597 5.17934C19.7597 4.99246 19.7552 4.80686 19.747 4.62193C20.6285 4.01345 21.3936 3.25416 21.999 2.38921" fill="url(#radGrad)">
                  <!-- Анимация увеличения радиуса гралиента при наведении на кнопку -->
            <animate id="anim" xlink:href="#radGrad"
                attributeName="r"
                dur="2s"
                begin="button2.mouseenter"
                values="50%;300%;50%"
                repeatCount="indefinite"
                fill="freeze"
                
            />   
                   <!-- Анимация остановки изменения радиуса -->
               <animate id="stop" xlink:href="#radGrad"
                attributeName="r"
                dur="0.1s"
                begin="button2.mouseleave"
                values="50%;50%"
                repeatCount="1"
                fill="freeze"
            />   
            </path>
            
            <g id="button2" pointer-events="all">
            <rect x="14" y="16" width="7" rx="2" height="3"  fill="#007171"></rect> 
              <text x="15.25" y="18" fill="white" font-weight="700" font-size="2px">Start </text>
            </g>
            </svg>
      </a>
      
    
 
 
 
 

Вариант без кнопки

Присваиваем SVG id="svg1"

Вместо условия запуска begin="button2.mouseenter" пишем begin="svg1.mouseenter"

<a  href="https://ru.stackoverflow.com/questions">
       <svg id="svg1"  xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="140" viewBox="0 0 22 18" >
            <radialGradient id="radGrad"  r="200%" ">
            <stop offset="0%" stop-color ="#00ff7f" />
            <stop offset="4%" stop-color ="#00ffff" />
            <stop offset="12.25%" stop-color ="#00ff7f" />
            <stop offset="31.25%" stop-color ="#00ffff" />
            <stop offset="50%" stop-color ="#00ffff" />
            </radialGradient>
            
            <path  d="M22 2.38918C21.191 2.73222 20.321 2.96407 19.4081 3.06852C20.3398 2.5346 21.0552 1.68955 21.3922 0.682817C20.5202 1.17718 19.5546 1.53577 18.526 1.72905C17.7032 0.891167 16.5301 0.367432 15.232 0.367432C12.7393 0.367432 10.7189 2.298 10.7189 4.67956C10.7189 5.01766 10.7584 5.34689 10.8357 5.6623C7.0846 5.4827 3.75901 3.76541 1.53295 1.15673C1.14443 1.79333 0.921886 2.53398 0.921886 3.3244C0.921886 4.82069 1.71835 6.14036 2.92973 6.91397C2.18992 6.89187 1.49391 6.6978 0.885376 6.37458C0.88451 6.39275 0.884504 6.41067 0.884504 6.4287C0.884504 8.51842 2.44044 10.2609 4.50492 10.6573C4.12653 10.7559 3.7279 10.808 3.31624 10.808C3.02512 10.808 2.74286 10.7817 2.46681 10.7311C3.04153 12.4443 4.70801 13.6912 6.68334 13.7261C5.13742 14.8829 3.19166 15.5719 1.07697 15.5719C0.712916 15.5719 0.353368 15.5514 0 15.5118C1.99818 16.7353 4.37022 17.449 6.91929 17.449C15.2207 17.449 19.7597 10.8783 19.7597 5.17934C19.7597 4.99246 19.7552 4.80686 19.747 4.62193C20.6285 4.01345 21.3936 3.25416 21.999 2.38921" fill="url(#radGrad)">
                  <!-- Анимация увеличения радиуса гралиента при наведении на кнопку -->
            <animate id="anim" xlink:href="#radGrad"
                attributeName="r"
                dur="2s"
                begin="svg1.mouseenter"
                values="50%;300%;50%"
                repeatCount="indefinite"
                fill="freeze"
                
            />   
                   <!-- Анимация остановки изменения радиуса -->
               <animate id="stop" xlink:href="#radGrad"
                attributeName="r"
                dur="0.1s"
                begin="svg1.mouseleave"
                values="50%;50%"
                repeatCount="1"
                fill="freeze"
            />   
            </path>
                        
            </svg>
      </a>

Вариант с тенью при наведении

 #path:hover{
  filter:url(#dropshadow);
  
 }
<a  href="https://ru.stackoverflow.com/questions">
       <svg id="svg1"  xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="140" viewBox="0 0 24 22" >
           <defs>           
           <radialGradient id="radGrad"  r="200%" ">
            <stop offset="0%" stop-color ="#00ff7f" />
            <stop offset="4%" stop-color ="#00ffff" />
            <stop offset="12.25%" stop-color ="#00ff7f" />
            <stop offset="31.25%" stop-color ="#00ffff" />
            <stop offset="50%" stop-color ="#00ffff" />
            </radialGradient>
               
        <filter id="dropshadow" x="-5%" y="-10%" width="150%" height="150%">
            <feOffset result="offsetResult" in="SourceAlpha" dx="1" dy="1" />
            <feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="1"  />
            <feBlend in="SourceGraphic" in2="blurResult" mode="normal"  />
            
        </filter>
     
            </defs>
            
            <path id="path"  d="M22 2.38918C21.191 2.73222 20.321 2.96407 19.4081 3.06852C20.3398 2.5346 21.0552 1.68955 21.3922 0.682817C20.5202 1.17718 19.5546 1.53577 18.526 1.72905C17.7032 0.891167 16.5301 0.367432 15.232 0.367432C12.7393 0.367432 10.7189 2.298 10.7189 4.67956C10.7189 5.01766 10.7584 5.34689 10.8357 5.6623C7.0846 5.4827 3.75901 3.76541 1.53295 1.15673C1.14443 1.79333 0.921886 2.53398 0.921886 3.3244C0.921886 4.82069 1.71835 6.14036 2.92973 6.91397C2.18992 6.89187 1.49391 6.6978 0.885376 6.37458C0.88451 6.39275 0.884504 6.41067 0.884504 6.4287C0.884504 8.51842 2.44044 10.2609 4.50492 10.6573C4.12653 10.7559 3.7279 10.808 3.31624 10.808C3.02512 10.808 2.74286 10.7817 2.46681 10.7311C3.04153 12.4443 4.70801 13.6912 6.68334 13.7261C5.13742 14.8829 3.19166 15.5719 1.07697 15.5719C0.712916 15.5719 0.353368 15.5514 0 15.5118C1.99818 16.7353 4.37022 17.449 6.91929 17.449C15.2207 17.449 19.7597 10.8783 19.7597 5.17934C19.7597 4.99246 19.7552 4.80686 19.747 4.62193C20.6285 4.01345 21.3936 3.25416 21.999 2.38921" fill="url(#radGrad)">
                  <!-- Анимация увеличения радиуса гралиента при наведении на кнопку -->
            <animate id="anim" xlink:href="#radGrad"
                attributeName="r"
                dur="2s"
                begin="svg1.mouseenter"
                values="50%;300%;50%"
                repeatCount="indefinite"
                fill="freeze"
                
            />   
                   <!-- Анимация остановки изменения радиуса -->
               <animate id="stop" xlink:href="#radGrad"
                attributeName="r"
                dur="0.1s"
                begin="svg1.mouseleave"
                values="50%;50%"
                repeatCount="1"
                fill="freeze"
            />   
            </path>
                        
            </svg>
      </a>

1

Что было изменено, добавлено:

  • width="140" height="100" временное изменение, для увеличения иконки, чтобы был четче виден градиент при настройке анимации. Если всё устраивает легко вернуть размеры назад width="35" height="25"
  • Вместо одной анимации используются две. Первая для запуска анимации градиента при наведении mouseenter Вторая анимация mouseleave для остановки первой анимации, так как у первой анимации установлен параметр бесконечного повторения repeatCount="indefinite"

Обратите внимание, что у обоих анимаций атрибут begin="indefinite" установлен тоже в бесконечное значение. Это делается для перехвата управления анимации Smil SVG с помощью JS beginElement()

  • Кнопка добавлена с помощью тега <button>

  • Ссылка рабочая, при клике переход в раздел сайта "Вопросы"

let button = document.getElementById("button2"), 
   anim = document.getElementById("anim"),
   stop = document.getElementById("stop")
 
button.addEventListener('mouseenter', function() {
 
    anim.beginElement();
    
});

button.addEventListener('mouseleave', function() {
 
    stop.beginElement();
    
});
<a  href="https://ru.stackoverflow.com/questions">
       <svg  xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="100" viewBox="0 0 22 18">
            <radialGradient id="radGrad"  r="200%" ">
            <stop offset="0%" stop-color ="#00ff7f" />
            <stop offset="4%" stop-color ="#00ffff" />
            <stop offset="12.25%" stop-color ="#00ff7f" />
            <stop offset="31.25%" stop-color ="#00ffff" />
            <stop offset="50%" stop-color ="#00ffff" />
            </radialGradient>
            <path id="button" d="M22 2.38918C21.191 2.73222 20.321 2.96407 19.4081 3.06852C20.3398 2.5346 21.0552 1.68955 21.3922 0.682817C20.5202 1.17718 19.5546 1.53577 18.526 1.72905C17.7032 0.891167 16.5301 0.367432 15.232 0.367432C12.7393 0.367432 10.7189 2.298 10.7189 4.67956C10.7189 5.01766 10.7584 5.34689 10.8357 5.6623C7.0846 5.4827 3.75901 3.76541 1.53295 1.15673C1.14443 1.79333 0.921886 2.53398 0.921886 3.3244C0.921886 4.82069 1.71835 6.14036 2.92973 6.91397C2.18992 6.89187 1.49391 6.6978 0.885376 6.37458C0.88451 6.39275 0.884504 6.41067 0.884504 6.4287C0.884504 8.51842 2.44044 10.2609 4.50492 10.6573C4.12653 10.7559 3.7279 10.808 3.31624 10.808C3.02512 10.808 2.74286 10.7817 2.46681 10.7311C3.04153 12.4443 4.70801 13.6912 6.68334 13.7261C5.13742 14.8829 3.19166 15.5719 1.07697 15.5719C0.712916 15.5719 0.353368 15.5514 0 15.5118C1.99818 16.7353 4.37022 17.449 6.91929 17.449C15.2207 17.449 19.7597 10.8783 19.7597 5.17934C19.7597 4.99246 19.7552 4.80686 19.747 4.62193C20.6285 4.01345 21.3936 3.25416 21.999 2.38921" fill="url(#radGrad)"/>
                  <!-- Анимация увеличения радиуса гралиента при наведении на кнопку -->
            <animate id="anim" xlink:href="#radGrad"
                attributeName="r"
                dur="1.5s"
                begin="indefinite"
                values="50%;300%;50%"
                repeatCount="indefinite"
                fill="freeze"
                
            />   
                   <!-- Анимация остановки изменения радиуса -->
               <animate id="stop" xlink:href="#radGrad"
                attributeName="r"
                dur="0.1s"
                begin="indefinite"
                values="50%;50%"
                repeatCount="1"
                fill="freeze"
            /> 
            </svg>
      </a>
      <div><button id="button2"> Кнопка </button></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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