Вариант 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>