htmlにインラインで記述したSVGのhover時のtransitionアニメーションが、Safari,IEで効かない

Question

SVGでボタンを作成し、htmlに直接記載して、fillをCSSで変更することで
hover時に色を変える、というのをやりたいのですが、
なぜかSafari,IEでCSSアニメーションのtransitionがききません(色は変わります)。

原因・対処法わかりますでしょうか？

<span class="button">
  <svg class="svg-img" xmlns="http://www.w3.org/2000/svg" width="124" height="124" viewBox="0 0 124 124">
    <g id="グループ_1" data-name="グループ 1" transform="translate(-1015 -555)">
      <circle id="楕円形_1" data-name="楕円形 1" cx="62" cy="62" r="62" transform="translate(1015 555)" fill="#eb1717"/>
      <path id="パス_1" data-name="パス 1" d="M-35.815.228c3.154,0,4.921-1.5,4.921-4.161A3.751,3.751,0,0,0-32.072-6.84a3.481,3.481,0,0,0-1.919-.874,3.215,3.215,0,0,0,1.5-.8,3.4,3.4,0,0,0,1.064-2.679c0-2.375-1.653-3.7-4.6-3.7h-4.484c-1.292,0-1.6,0-2.394-.038A18.112,18.112,0,0,1-42.75-12.6V-2.28A13.56,13.56,0,0,1-42.921.285c.779-.038,1.33-.057,2.432-.057ZM-40.242-8.7v-4.066h3.933a2.7,2.7,0,0,1,1.824.589,1.935,1.935,0,0,1,.494,1.406A2.015,2.015,0,0,1-36.29-8.7Zm0,2.109h4.047a3.1,3.1,0,0,1,2.071.646,2.059,2.059,0,0,1,.608,1.653c0,1.539-.95,2.375-2.641,2.375h-4.085Zm21.888-8.3a15.464,15.464,0,0,1,.152,2.6V-5.6c0,2.584-1.311,3.933-3.857,3.933-2.565,0-3.9-1.349-3.9-3.914v-6.707a14.9,14.9,0,0,1,.152-2.6h-2.831a15.609,15.609,0,0,1,.152,2.6v6.707a6.12,6.12,0,0,0,1.425,4.37A6.546,6.546,0,0,0-22.154.57c4.142,0,6.479-2.2,6.479-6.137v-6.745a15.356,15.356,0,0,1,.152-2.584Zm12.179,2.28H-3.8a19.979,19.979,0,0,1,2.793.133v-2.546A20.159,20.159,0,0,1-3.8-14.9h-7.524a19.111,19.111,0,0,1-2.584-.133v2.546a18.867,18.867,0,0,1,2.6-.133H-8.74V-2.242A15.927,15.927,0,0,1-8.892.228h2.869a15.771,15.771,0,0,1-.152-2.47Zm13.471,0H9.671a19.979,19.979,0,0,1,2.793.133v-2.546a20.159,20.159,0,0,1-2.793.133H2.147a19.111,19.111,0,0,1-2.584-.133v2.546a18.867,18.867,0,0,1,2.6-.133H4.731V-2.242A15.927,15.927,0,0,1,4.579.228H7.448A15.771,15.771,0,0,1,7.3-2.242ZM20.672-15.2a6.585,6.585,0,0,0-4.9,1.9A8.134,8.134,0,0,0,13.6-7.372c0,4.826,2.774,7.923,7.087,7.923S27.8-2.565,27.8-7.372A8.194,8.194,0,0,0,25.669-13.3,6.658,6.658,0,0,0,20.672-15.2Zm.057,13.49a4.1,4.1,0,0,1-2.945-1.159,6.277,6.277,0,0,1-1.539-4.484c0-3.439,1.729-5.6,4.465-5.6A4.089,4.089,0,0,1,23.636-11.8a6.137,6.137,0,0,1,1.5,4.427C25.137-3.876,23.446-1.71,20.729-1.71ZM42.921.228a14.336,14.336,0,0,1-.152-2.451V-12.274a16.612,16.612,0,0,1,.152-2.622H40.147a16.612,16.612,0,0,1,.152,2.622V-5.89c0,.8.057,1.938.133,2.679-.418-.76-1.026-1.748-1.482-2.432l-4.807-7.239A10.421,10.421,0,0,1,32.984-14.9H30.02a15.827,15.827,0,0,1,.152,2.451v9.8A20.557,20.557,0,0,1,30.02.228h2.774a21.029,21.029,0,0,1-.152-2.85V-8.854c0-.437-.038-1.292-.057-1.653-.057-.7-.057-.7-.076-.969.456.893.931,1.71,1.292,2.28L38.7-1.8A18.93,18.93,0,0,1,39.919.228Z" transform="translate(1077 625)" fill="#fff"/>
    </g>
  </svg>
</span>

.svg-img {
  max-width: 100%;
  transition: all .3s ease;
  &:hover {
      transition: all .3s ease;
    circle{
         fill: #ff12ad; 
    }
  }
}

Answer 1

とりあえず詰まったんでしたらSCSSをやめてCSSでやってみるところからでは？

.svg-img:hover circle{
  fill: #ff12ad; 
}

Comments

[mamemam]

コメントありがとうございます！
CSSでやってみたところ、こちらに貼り付けているサンプルコードはきちんとtransitionがきくようになりましたが、実際に使っているSVGだとアニメーションがきかないままでした、、。
SVGによって違うんでしょうかね、。