CSS-Hintergrund Hover-Übergang nicht mit Svg Hover-Übergang in IE

Question

Ich benutze Svg-Symbol für die Schaltfläche Standort. Ich habe Hover-Übergang auf die Schaltfläche anwenden.

Es funktioniert gut in Chrome, Firefox, Safari außer IE.

Der Hover-Effekt in Svg-Symbol scheint von der gesamten Schaltfläche getrennt. Kann jemand das beheben?

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; 
} 

-Link: http://codepen.io/rae0724/pen/GNbYjO

Answer 1

Sie können versuchen, das currentColor Schlüsselwort auf dem Wege Hub zu verwenden, und dann haben nur einen Übergang läuft .. (Ich kann das nicht testen, da ich keinen IE zur Verfügung habe)

.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>