IEのsvgホバートランジションとCSSの背景ホバートランジションが同期しない

Question

場所ボタンにsvgアイコンを使用しています。 ボタン上でホバートランジションを適用しました。

IE以外のChrome、Firefox、Safariでうまく動作します。

svgアイコンのホバー効果がボタン全体から分離されているようです。 これを修正する方法を知っている人は誰ですか？

HTML：

<a href="#" class="locationbtn"> 
    <span class="locationbtn-txt">Location</span> 
    <span class="locationbtn-icon"> 
       <svg width="22" height="28" viewBox="490.275 224.782 21.917 28.833"> 
         <g id="icon-location" stroke="#FFF" stroke-miterlimit="10"><path fill="#FFF" d="M501.233 252.398c-.12 0-.235-.052-.312-.143-.395-.46-9.687-11.302-9.687-16.535 0-5.36 4.485-9.723 10-9.723s10 4.36 10 9.723c0 5.234-9.29 16.076-9.687 16.536-.078.09-.193.142-.313.142zm0-25.604c-5.063 0-9.182 4.004-9.182 8.927 0 4.43 7.538 13.69 9.183 15.654 1.644-1.967 9.183-11.225 9.183-15.653-.002-4.922-4.12-8.926-9.183-8.926z"/><ellipse fill="none" stroke-width="2" cx="501.233" cy="236.003" rx="4.387" ry="4.264"/></g> 
     </svg> 
     </span> 
</a> 

CSS：

.locationbtn { 
    width:140px; 
    color:#fff; 
    background: #555; 
    padding: 10px 20px; 
    display: block; 
    transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
} 

.locationbtn-txt { 
    display: inline-block; 
    margin-right: 0.6em; 
    margin-top: 0.2em; 
    font-size: 1.4em; 
} 

.locationbtn-icon { 
    display: inline-block; 
    vertical-align: middle; 
    width: 22px; 
    height: 28px; 
} 

.locationbtn:hover { 
    background: #000; 
    color: yellow; 
} 

a svg #icon-location { 
    transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
} 

.locationbtn:hover #icon-location { 
    stroke: yellow; 
} 

リンク：あなたのパスのストロークにcurrentColorキーワードを使用しようと1つのだけの移行ランニングを持つことができますhttp://codepen.io/rae0724/pen/GNbYjO

Answer 1

.. （私はIEが利用できないのでこれをテストすることはできません）

.locationbtn { 
 
    width: 140px; 
 
    color: #fff; 
 
    background: #555; 
 
    padding: 10px 20px; 
 
    display: block; 
 
    transition: all 0.5s ease; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
} 
 
.locationbtn-txt { 
 
    display: inline-block; 
 
    margin-right: 0.6em; 
 
    margin-top: 0.2em; 
 
    font-size: 1.4em; 
 
} 
 
.locationbtn-icon { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 22px; 
 
    height: 28px; 
 
} 
 
.locationbtn:hover { 
 
    background: #000; 
 
    color: yellow; 
 
}

<a href="#" class="locationbtn"> 
 
    <span class="locationbtn-txt">Location</span> 
 
    <span class="locationbtn-icon"> 
 
       <svg width="22" height="28" viewBox="490.275 224.782 21.917 28.833"> 
 
         <g id="icon-location" stroke="currentColor" stroke-miterlimit="10"><path fill="currentColor" d="M501.233 252.398c-.12 0-.235-.052-.312-.143-.395-.46-9.687-11.302-9.687-16.535 0-5.36 4.485-9.723 10-9.723s10 4.36 10 9.723c0 5.234-9.29 16.076-9.687 16.536-.078.09-.193.142-.313.142zm0-25.604c-5.063 0-9.182 4.004-9.182 8.927 0 4.43 7.538 13.69 9.183 15.654 1.644-1.967 9.183-11.225 9.183-15.653-.002-4.922-4.12-8.926-9.183-8.926z"/><ellipse fill="none" stroke-width="2" cx="501.233" cy="236.003" rx="4.387" ry="4.264"/></g> 
 
     </svg> 
 
     </span> 
 
</a>