CSS background hover transition not sync with svg hover transition in IE

Question

I am using svg icon for the location button. I have apply hover transition on the button.

It works well in Chrome, Firefox, Safari except IE.

The hover effect in svg icon seems separated from the whole button. Anyone know how to fix this?

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

You can try to use the currentColor keyword on your paths stroke and then only have one transition running... (i can not test this as i don't have an IE available)

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