CSS 背景悬停过渡与 IE 中的 svg 悬停过渡不同步

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

链接:http://codepen.io/rae0724/pen/GNbYjO

Answer 1

您可以尝试在路径描边上使用 currentColor 关键字，然后只运行一个过渡...(我无法测试它，因为我没有可用的 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>